Help in removing gap between navbar and header

Gurpreet_Singh · May 22, 2020, 4:45pm

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

Chooqumah · May 22, 2020, 4:49pm

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

Dutchman · May 22, 2020, 4:50pm

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

Gurpreet_Singh · May 23, 2020, 2:03am

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

Catalactics · May 23, 2020, 2:17am

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;

}

Dutchman · May 23, 2020, 2:19am

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

@Gurpreet_Singh Take a look friend!

Catalactics · May 23, 2020, 2:20am

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

Gurpreet_Singh · May 23, 2020, 2:26am

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

Dobs · May 23, 2020, 2:26am

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 ?

Catalactics · May 23, 2020, 2:29am

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;
}

Dobs · May 23, 2020, 2:33am

@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.

Dobs · May 23, 2020, 2:34am

Nice eyes. The mystery has been solved lol

Gurpreet_Singh · May 23, 2020, 2:36am

hey, what was the problem??

Catalactics · May 23, 2020, 2:37am

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

Catalactics:

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;
}

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

Dobs · May 23, 2020, 2:39am

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!

Catalactics · May 23, 2020, 2:40am

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

Gurpreet_Singh · May 23, 2020, 2:43am

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

Dobs · May 23, 2020, 2:55am

Awesome! Thanks for the screenshot visual!