title: Navigation bar shrinks when position is set to fixed
body: <p>I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    background-color: #ffeecc;
    font-family: 'Chivo', sans-serif;
  }
  
  .container {
    margin: auto;
    width: 75%;
  }
  
  .nav_left {
    width: 100%;
    background-color: #258e25;
    height: 50px;
    float: left;
    text-align: left;
  }
  
  .banner {
    width: 100%;
    overflow: hidden;
    background-color: white;
  }
  
  .banner img {
    width: 70%;
    height: 150px;
    padding: 0 15%;
  }
  
  .top {
    position: fixed;
  }
  
  nav {
    text-align: center;
  }
  
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  
  nav ul li {
    float: left;
    text-align: center;
    height: 100%;
    width: 25%;
  }
  
  nav ul li a {
    display: inline-block;
    width: 100%;
    font-weight: bold;
    line-height: 50px;
    text-decoration: none;
    color: white;
  }
  
  nav ul li a:hover {
    background-color: white;
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="top"&gt;
      &lt;div class="banner"&gt;
        &lt;img src="images/winwin-logo-cover.jpg" alt="winwin logo"&gt;
      &lt;/div&gt;
      &lt;nav&gt;
        &lt;div class="nav_left"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="index.php" style="background-color: white; color:black ;font-size:25px;"&gt;PROIZVODI&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="o_nama.php"&gt;O NAMA&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="kontakt.php"&gt;KONTAKT&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="nav_right"&gt;&lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is how it should look like
  <a href="https://i.stack.imgur.com/vPEGj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vPEGj.png" alt="without .top{position:fixed}"></a></p>
  
  <p>this is how it looks like when i put <code>.top{position:fixed}</code>
  <a href="https://i.stack.imgur.com/1j90J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1j90J.png" alt="with .top{position:fixed}"></a></p>