title: input Text box move to new line
body: <p>I seem to have a problem with regards to moving my textbox back to its original division. Every time I put the search bar back into that area. I'm trying to make the BBC news website but it seems to not work. </p>
  
  <p>When I try to place a search bar in the correct area, it moves it into a new line.</p>
  
  <p><a href="https://i.stack.imgur.com/iXmgE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iXmgE.png" alt="It moves it into a new line."></a></p>
  
  <p>I want it to look like the bar on the <a href="http://www.bbc.co.uk/news/technology" rel="nofollow noreferrer">BBC News website.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
  }
  
  #nav-bar {
    width: 1000px;
    margin: 0 auto;
    height: 40px;
    background-color: inherit;
    /* NOTE: Temporary color untill logo is adjusted. */
  }
  
  #logo {
    margin: 10px 8px 10px 10px;
    width: 100px;
    float: left;
  }
  
  #signin-image {
    width: 25px;
    margin: 13px 10px;
    float: left;
  }
  
  #signin-text {
    font-weight: bold;
    font-size: 90%;
    position: relative;
    top: 16px;
    padding-right: 50px;
  }
  
  #divider-alt {
    float: left;
    height: 40px;
  }
  
  #bell-div {
    float: left;
  }
  
  #bell {
    height: 25px;
    margin: 10px 10px;
  }
  
  .topbar-section {
    float: left;
    border-left: 1px #cccccc solid;
    height: 100%;
  }
  
  .topbar-menu {
    font-weight: bold;
    font-size: 90%;
    padding: 13px 15px 0px 15px;
    height: 27px;
  }
  
  #more-arrow {
    width: 16px;
    margin-left: 15px;
  }
  
  #search-box {
    background-color: #e4e4e4;
    border: none;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 0 5px 5px;
    float: left;
  }
  
  #magnifying-glass {
    height: 27px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Technology - BBC News&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="nav-bar"&gt;
      &lt;img id="logo" src="img/bbc-logo.png"&gt;
      &lt;div id="sign-in" class="topbar-section"&gt;
        &lt;img id="signin-image" src="img/signin-icon.png" alt=""&gt;
        &lt;span id="signin-text"&gt;Sign in&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="bell-div"&gt;
        &lt;img id="divider-alt" src="img/divider-alt.png" alt=""&gt;
        &lt;img id="bell" src="img/bell.png" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        News
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        Sport
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        Weather
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        iPlayer
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        TV
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        Radio
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        &lt;span&gt;More&lt;/span&gt;
        &lt;img src="img/more-arrow.png" id="more-arrow"&gt;
      &lt;/div&gt;
      &lt;div class="topbar-section topbar-menu"&gt;
        &lt;input id="search-box" type="text" value="Search"&gt;
        &lt;img id="magnifying-glass" src="img/search.png" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="mid-bar"&gt;
  
    &lt;/div&gt;
  
    &lt;div id="news-anchor"&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>