title: HTML & CSS - navigation bar won't float horizontally using float left
body: <p>Trying to make a navigation bar horizontal with the logo on the left but the text won't move. Anybody got any idea why not?</p>
  
  <p><a href="https://jsfiddle.net/herxforn/1/" rel="nofollow">https://jsfiddle.net/herxforn/1/</a></p>
  
  <p>CSS</p>
  
  <pre><code>body {
      width 100%;
      max-width: 960px;
      margin: 0 auto;
  }
  
  nav {
      width: 100%;
      margin: 20px 0;
  }
  
  nav ul {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  nav ul li {
      width: 20%;
      float: left;
  
  }
  
  nav ul li a {
      display: block;
      width: 100%;
  }
  </code></pre>