title: Why is text wrapping when zooming page?
body: <p>I have this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #f1f1f1;
  }
  
  #body {
    width: 1040px;
    height: 1319px;
    margin: 0 auto;
    background-color: gray;
  }
  
  #header {
    width: 76%;
    background-color: yellow;
    float: left;
  }
  
  #header #logo {
    width: 49%;
    background-color: white;
    float: left;
  }
  
  #header #logo img {
    float: left;
  }
  
  #header #logo p {
    margin-top: 30px;
    font-weight: bold;
    color: #aeaeae;
  }
  
  #header #login {
    width: 51%;
    height: 79px;
    background-color: white;
    float: left;
  }
  
  #header #login form {
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DCDCDC), color-stop(1, #F3F3F3));
    background-image: -o-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
    background-image: -moz-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
    background-image: -webkit-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
    background-image: -ms-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
    background-image: linear-gradient(to bottom, #DCDCDC 0%, #F3F3F3 100%);
    margin-top: 38px;
  }
  
  #header #login form input[type="text"],
  #header #login input[type="password"] {
    width: 98px;
    height: 17px;
  }
  
  #header #login form input[type="submit"] {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F1A62D), color-stop(1, #F56E00));
    background-image: -o-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
    background-image: -moz-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
    background-image: -webkit-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
    background-image: -ms-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
    background-image: linear-gradient(to bottom, #F1A62D 0%, #F56E00 100%);
    border: none;
    border-radius: 5px;
    color: white;
    width: 70px;
    height: 22px;
    margin-left: 5px;
    font-family: Arial;
  }
  
  #header #navbar {
    width: 100%;
    background-color: magenta;
    float: left;
  }
  
  #sidebar {
    height: 890px;
    width: 24%;
    background-color: brown;
    float: right;
  }
  
  #content {
    width: 76%;
    background-color: red;
    float: left;
  }
  
  #footer {
    width: 76%;
    background-color: gold;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="body"&gt;
    &lt;div id="sidebar"&gt;
      &lt;h1&gt;Sidebar&lt;/h1&gt;
  
      &lt;div id="register"&gt;&lt;/div&gt;
      &lt;div id="credit"&gt;&lt;/div&gt;
      &lt;div id="cenik"&gt;&lt;/div&gt;
      &lt;div id="cards"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="header"&gt;
      &lt;div id="logo"&gt;
        &lt;img src="img/logo.png" alt="Logo" width="185" height="79"&gt;
        &lt;p&gt;aaaaaaa&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="login" id="loginBox"&gt;
        &lt;form action="#"&gt;
          &lt;label for="username"&gt;Jméno:&lt;/label&gt;
          &lt;input type="text" name="username" class="usernameTxt"&gt;
          &lt;label for="password"&gt;Heslo:&lt;/label&gt;
          &lt;input type="password" name="password" class="passwordTxt"&gt;
          &lt;input type="submit" name="submit" value="Přihlásit"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div id="navbar"&gt;
        &lt;h1&gt;Navbar&lt;/h1&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;h1&gt;Content&lt;/h1&gt;
  
      &lt;div id="reklama"&gt;&lt;/div&gt;
      &lt;div id="topPanel"&gt;&lt;/div&gt;
      &lt;div id="botPanel"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;
      &lt;h1&gt;Footer&lt;/h1&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that when I zoom out the text near the logo and the Login button wraps. I tried <code>white-space:nowrap</code> and <code>overflow:hidden</code> but it didn't work.</p>