Можете ли вы найти ошибку в этом HTML / CSS код?

Question

Результат должен выглядеть примерно так, как в 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

Это потому, что вы установили свойство width верхней панели идентификатора на 1000. Панель поиска не может поместиться (по крайней мере, в Chrome, может быть из-за полей браузера по умолчанию)

Сделайте свойство width равным 1050px, чтобы решить его.

#topbar {
  width: 1050px;
  margin: 0 auto;
  height: 40px;
}

Работает!

Answer 2

вау, спасибо разрушил мой мозг так как учитель в курсе установил его на 1000 пикселей я не понимаю, что я сделал неправильно делать то же самое : /

Answer 3

Это потому, что ширина вашего контейнера недостаточно велика. Если вы сделаете ширину #topbar 1100px, она не будет перенесена.

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