Can you find the error in this html/css code? - google-chrome

Question

The result should be looking like this, as it appears in Edge:
This is how it looks when rendered in Chrome; as you may notice the search box is misplaced, on the line below the category bar:
The raw code:
Please help me to find the error that makes the search box appear on the lower line. I have been through this from start to finish for hours, and can't figure out why the same code looks fine in Edge, but not in Chrome.
I won't switch browsers, I need a solution for this to keep operating with
Chrome.
#topbar {
width: 1000px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 26px;
margin-top: 5px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 100px;
}
#menu-bar {
width: 1000px;
margin: 0 auto;
}
h1 {
padding: 0;
margin: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<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">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
</div>
</div>

Answer 1

It's because the width of your container isn't big enough. If you make the width of #topbar 1100px then it won't wrap.
#topbar {
width: 1100px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
width: 100px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image {
width: 25px;
margin: 11px 15px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 14px;
padding-right: 50px;
}
#wigglyline {
float: left;
height: 40px;
}
#bell {
height: 25px;
margin: 9px 8px;
}
#bell-div {
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 20px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 26px;
margin-top: 5px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 100px;
}
#menu-bar {
width: 1000px;
margin: 0 auto;
}
h1 {
padding: 0;
margin: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="wigglyline" src="images/wigglyline.png">
<img id="bell" src="images/bell.png">
</div>
<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">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section">
<input id="search-box" type="text" value="Search">
<input type="image" id="magnifying-glass" src="images/magnifying-glass.png">
</div>
</div>
<div class="clear"></div>
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
</div>
</div>

Answer 2

It's because you've set the width property of the ID top-bar to 1000. Search bar cannot fit in (At least in chrome, maybe because of default browser margins)
Make the width property to something like 1050px to solve it.
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;
}
It works!