Why do I have extra space between elements?

Question

I'm practicing creating layouts with CSS, and somehow I ended up with this space between the banner image and the navigation bar. Can someone tell me how to get rid of it? Neither element has top or bottom margins.

https://code.sololearn.com/WySGfy7UDHdO/?ref=app

Answer 1

Here your <ul> element has margins so:
/* Styles for main navigation */
#navbar {
list-style-type: none;
height: 25px;
width: 100%;
background-color: #36688d;
margin: 0;
}
You should add margin: 0;
It helps 80% avoid extra spaces.

Answer 2

Your image can't fill its parent div with id #banner.
There lots of ways, try this
Add in your image
margin-bottom: - 5px; (maybe 6px ...)

#banner img {
height: 140px;
width: 100%;
margin-bottom: -5px;
}

And check, may be it looks different in mobile and computer displays.
And you can find another ways
Try again and again.

Answer 3

Muhammad Thank you, that helped! There is still a gap, but it's smaller now. Is it possible to completely remove it?

Answer 4

And I think your JQuery scripts do nothing now, if you remove your code nothing will change.

Answer 5

Thanks Muhammad ! And yes, the JQuery script was part of a separate experiment lol

Answer 6

Not at all good luck!