title: divs being pushed down
body: <p>Hey guys i'm making a website but for some reason my div tags are being pushed down when they leave the window. For example, here is my navigation.</p>
  
  <p><img src="https://i.stack.imgur.com/qWFeE.png" alt="enter image description here"></p>
  
  <p>Then when I make the browser window smaller it does this.</p>
  
  <p><img src="https://i.stack.imgur.com/3iC1U.png" alt="enter image description here"></p>
  
  <p>These are the attributes to do with the navigation.</p>
  
  <pre><code>.navigation_container {
  margin: 0;
  padding: 0;
  position: relative;
  padding-top: 30px;
  }
  
  .navigation {
  height: 40px;
  color: #FFFFFF;
  font-size: 15px;
  list-style: none;
  }
  
  .link {
  height: 10px;
  float: left;
  position: relative;
  margin-top: 15px;
  margin-left: 15px;
  text-decoration: none;
  }
  
  .link_a {
  text-decoration: none;
  padding: 10px;
  }
  </code></pre>
  
  <p>Also my Html code for those who want it.</p>
  
  <pre><code>                &lt;div class="navigation_container"&gt;
                      &lt;div class="navigation"&gt;
                          &lt;li class="link"&gt;&lt;a class="link_a current" href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="link"&gt;&lt;a class="link_a" href=""&gt;Features&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="link"&gt;&lt;a class="link_a" href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="link"&gt;&lt;a class="link_a" href=""&gt;Link1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="link"&gt;&lt;a class="link_a" href=""&gt;Link2&lt;/a&gt;&lt;/li&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Any help as to why this is happening would be appreciated.</p>
  
  <p>Thanks.</p>