Help in removing gap between navbar and header

1

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

2

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

3

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

4

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

5

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
6

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

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
8

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

9

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 ?

10

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
11

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

12

Nice eyes. The mystery has been solved lol

13

hey, what was the problem??

14

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

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

2 Likes
15

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
16

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

image
image697Ă—568 35.1 KB

2 Likes
17

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
18

Awesome! Thanks for the screenshot visual!