I have a media query for max-width: 450px, that positions my nav element to the top. At larger screen sizes, the nav element is at the left.
However, although I’ve managed to get my nav to the top, there is what seems to be a blank space above the nav. I’ve checked using the dev tools, and it’s not actually a margin for the nav element or any containing element.
Could someone please enlighten me? Any help appreciated.
It’s a margin that is set by the browser. Different browsers have different margins and a lot of devs start out their CSS by zeroing out the margin and padding so what they style will be consistent across all browsers.
If you do that, it will remove that blank space you’re seeing.
I had this issue too with my product landing page. I set body margin to 0 and it didnt work. For me it was actually the h2 element beneath the nav bar that was causing the issue. Set margin to 0 and everything was gravy.
I can clearly see that the margin is created by the h1 element under header. Default margin of 0.83em vertically. Thats what is causing the top margin.