Unfortunately by declaring everything in PX you've told a lot of users to go plow themselves from an accessibility standpoint. You've got 100% / 1em as the outer declaration, which means 1EM could be anything from 12px to infinity, meaning your breakpoints for the media queries are gibberish.

Like on my media center which is set for 32px == 1REM, as such your 600px media query is far too small and triggers far too late. You want to do that, declare it as 37.5em, so that 16px / windows small / vga users get 600px, large/8514/v+medium/20px users get 750px, and retina/4k users get 1200px. That's what %/em is FOR.

IF you're gonna use % or EM font size, your margins, paddings, AND MEDIA QUERIES should be in EM. Otherwise it's not going to trigger when you think.

Don't mix and match, cause it won't match. Hence all that 20px and 600px stuff? Yeah, don't do that!

Likewise your home button is semantic gibberish. It should either be in the list, or if it's going to be the site title be in a H1. Basic proper semantics BEFORE you start screwing around with layout.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store