Header has a space, how to remove it.
Hi guys, my header has a space its not filling in at the top. I dont have any margin-top or anything. How can i resolve this easily and make the header responsive. If i give the header a flex the whole nav is going wrong.
https://codepen.io/Boeroe/pen/QWzeEez
20 Replies
both
body and ul element have default margin applied to them check in dev tools 🙂I've both set them to 0, but then the nav ul is gettin all to the right. If i set a margin-top right its not getting the result. https://codepen.io/Boeroe/pen/QWzeEez
margin-top instead of margin should work on both
It's still all to the right
what do you mean?? it has 8px margin on both sides
give your li's some padding if you don't want them to stick to right edge of the header
or to the ul
https://codepen.io/Boeroe/pen/QWzeEez now it has to move more to the right. With padding its getting to big gaps and the header is moving with it.
I'm consfused at this point. What is your desired outcome ??
if you want more spaces at the sides, you can use padding-block on the ul, or the header
You have a padding of 3rem in your .nav-list li
I think that is your problem
You can use the margin-inline property to space your nav-list but you should use the :not-lastchild selector so you won't add it to the last element
Or Shortcut, add a gap property to your nav list where you have the display: flex;
In your header, remove the height of 20%... It is not doing anything in your css
Use pixels if you want to add a specific height
https://codepen.io/Boeroe/pen/QWzeEez i fixed it i think. Any feedback is welcome on how to improve it or what can be edited
instead of those big 10rem margins that will give you headaches later you could just switch
justify-content: space-between; to justify-content: space-around; or wrap your logo and navigation in a div and give it a max-width: 80% plus margin-inline: auto;I like it the first way! Ty so much
One more thing if i add text-decoration: none to the logo its working but to the ul/li not. Why is that ?
because you need to target the
a not li or ul the a element has itWhich of because
a has a default text decoration on it, which is overriding the value you're setting on the patent elementThanks lads!