Gap between div elements - html

Question

I was hoping for some help with a problem involving some divs.
I am doing a Udemy course to recreate the BBC website and I've got to a point where I have some divs with content but there is a gap between them.
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial;}
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;}
#bbclogo {
margin-top: 8px;
float:left;
margin-right: 10px;
}
.topbar-section {
float:left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signinimage {
margin: 10px 15px;
height: 20px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 14px;
position: relative;
top: 12px;
padding-right: 65px;
}
#signin-div {
float:left;
}
#wiggly-line {
height: 40px;
float: left;
}
#bello-image {
height: 26px;
margin: 7px 15px 7px 12px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 14px;
padding: 13px 13px 0 13px;
height: 27px;
}
#more-arrow {
height: 4px;
margin-left: 25px;
}
#searchbox {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 15px;
padding: 5px;
margin: 8px 0 8px 8px;
float: left;
}
#magnifying-glass {
margin-top: 8px;
height: 27px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 60px;
}
#menu-bar {
width: 1050px;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float: left;
}
#local-news {
float: right;
border: 1px solid #BB4545;
width: 175px;
margin: 15px 10px;
padding: 5px 5px 4px 5px;
}
#local-news a {
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
top: -2px;
}
#local-news:hover {
text-decoration: underline;
}
#local-news img {
height: 20px;
padding-left: 10px;
}
#menu-bar-container-2 {
width: 100%;
background-color: #A91717;
display: block;
}
#menu-bar-2 {
width: 1050px;
margin: 0 auto;
height: 35px;
display: block;
}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 16px;
border-right: 1px solid #BB4545;
font-size: 12px;
position: relative;
top: 9px;
float: left;
}
<div id="topbar">
<!--white top bar-->
<img id="bbclogo" src="Images\bbclogo.png"/>
<!--left border div with classes-->
<div id="signin-div" class="topbar-section"></div>
<!--Signin image-->
<div id="signin-div">
<img id="signinimage" src="Images\signinimage.png"/>
<span id="signin-text">Sign in</span>
</div>
<!--Bell div-->
<div id="bell-div">
<img id="wiggly-line" src="Images/pointed_line.png"/>
<img id="bello-image" src="Images/bell.png"/>
</div>
<!--Menubar links-->
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">iPlayer</div>
<div class="topbar-section topbar-menu">TV</div>
<div class="topbar-section topbar-menu">Radio</div>
<div class="topbar-section topbar-menu">More
<img id="more-arrow" src="Images/arrow.png"/>
</div>
<!--Search bar-->
<div class="topbar-section">
<input id="searchbox" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="Images/glass.png"/>
</div>
</div>
<!--To clear previous floats-->
<div class="clear"></div>
<!--Menu bar-->
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
Find local news
<img src="Images/pointer.png">
</div>
</div>
</div>
<!--Menu bar 2-->
<div id="menu-bar-container-2">
<div id="menu-bar-2">
Home
UK
World
Business
Politics
Tech
Science
Health
Education
Entertainent & Arts
Video & Audio
More
</div>
</div>
I've tried playing around with various things (changing display, floating, trying to clear previous divs...) but I can't seem to figure out the problem. I was hoping for some advice about what I am doing wrong.
I read somewhere that whitespace between divs can sometimes be an issue. Could this be the problem?
(strangely, when I created the code snippet above, the gap was not showing in the results window but when I try it in Chrome, IE or Firefox, the problem occurs)
Many thanks in advance

Answer 1

thanks for the advice on my problem.
As mentioned in my last comment, it was the height of the div which was creating the gap (it wasn't tall enough). I think this was due to another element's padding pushing the lower div down, so when I increased the height it brought everything into alignment.
I'm still learning a lot about web development and I am grateful for the responses. I'm sure I'll be learning a lot more along the way. Many thanks!