title: Keeping a navbar (unorderd list) inside the header
body: <p>You can see my problem here: <a href="https://jsfiddle.net/jonese1234/rnbphm4x/" rel="nofollow noreferrer">https://jsfiddle.net/jonese1234/rnbphm4x/</a></p>
  
  <p>The problem is my nav bar will not sit inside the div/header, i have tryed many methods but i can not get it to work, so i hope somebody can spot my error.</p>
  
  <p>i believe its something to do with:</p>
  
  <pre><code>.nav li {
      float:left;
      width: 25%; /* Split width appropriately */
  }
  
  .nav a:link, a:visited {
      display:block;
  </code></pre>
  
  <p>It is also ment to have each button cover 25% of the width, however when if it manage to get it inside the div/header it never covers the whole width.</p>