Help in removing gap between navbar and header

Help in removing gap between navbar and header
0

Hi, everyone Iam not able to remove gap between header and navbar i dont know what wrong i have coded so that this occur usually this dont happen.kindly help

pen is https://codepen.io/gurpreet_singh9189825/pen/wvKOwKd

It would help if you could share a snippet of your code with us.

Hello @Gurpreet_Singh

Can you provide the code your working on? Try creating some preformatted text (ie a code snippet) so we can help you out and see your code! Or provide a Pen link from CodePen.io

https://codepen.io/gurpreet_singh9189825/pen/wvKOwKd

Hey, @Gurpreet_Singh,

  • In your code here, you used a margin that made the navbar moves every element on top and below it by 30 px. You can easily fix this by adding a margin-bottom: 0; to .navbar ul.
.navbar ul li{
margin: 0 30px;
font-size:20px;

} 
1 Like

@Catalactics I am not the original author of the post, but thank you for keeping me in the loop as well! :slight_smile:

@Gurpreet_Singh Take a look friend!

1 Like

Whoops, my bad, I used the auto tag, bc on FCC it will auto tag the author. Sorry, I’ll fix it :laughing:

1 Like

Hi,But top and bottom margin is 0(zero),and left and right margin is 30px;

Weird though, maybe I am just tired myself and I did figure it out eventually by adding a margin-bottom: 0 to the navbar ul. However why is it adding that margin when the margin is set to 0px for top and bottom ?

I think my eyes are tricking me as well, I just noticed. But yeah, just by adding the margin-bottom: 0; to .navbar ul like @Dobs said works.

  • I see why it has a margin there, because when you declared the margin: 0; on your *, you did a little something wrong, tell me what’s wrong with this code.
*{
  margin 0;
  padding:0;
  box-sizing:border-box;
}
1 Like

@Gurpreet_Singh whenever in doubt go to your dev tools and hover over the element and you can find the issue, in this case the margin. We will call it the “Mysterious Margin” because without dev tools I wouldn’t have known how or why that gap was there.

Nice eyes. The mystery has been solved lol

hey, what was the problem??

On my post here, you did a little something wrong:

You simply forgot to add : (colon) after margin.

2 Likes

This was a great reminder to know for next time. I should have known better when the margin bottom was fixed after adding 0px but there was still spacing at the top. Great lesson for next time if something similar happens!

2 Likes

I actually figured it out using the Dev Tools. Without it we are powerless :laughing:
Dev Tools are the best tool you can use to debug your code

2 Likes

Yes! thanks a lot , i knew i did something wrong but not able to figure out,you,guys did, again thanks a lot

1 Like

Awesome! Thanks for the screenshot visual!