title: Centering a list using CSS
body: <p>I'm having trouble centering my navigation bar, I can see the issue but I can't really find a fix for it. Sorry I'm kind of new to CSS.</p>
  
  <ul>
  <li><a href="http://i.stack.imgur.com/TLmR1.png" rel="nofollow">Header bar with inspect element</a></li>
  </ul>
  
  <p>As you can see there is a an extra block at the front of the list.
  I have searched around for a fix but I can't seem to make it fit without using absolute positioning which I'd like to avoid.</p>
  
  <p>Here is a jsfiddle page to show you exactly what I mean - <a href="https://jsfiddle.net/h4ay0voj/2/" rel="nofollow">https://jsfiddle.net/h4ay0voj/2/</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
      &lt;ul class="menu"&gt;
          &lt;a class="active" href=""&gt;
              &lt;li class="selected"&gt;Link1&lt;/li&gt;
          &lt;/a&gt;
          &lt;a href=""&gt;
              &lt;li&gt;Link2&lt;/li&gt;
          &lt;/a&gt;
          &lt;a href=""&gt;
              &lt;li&gt;Link3&lt;/li&gt;
          &lt;/a&gt;
          &lt;a href=""&gt;
              &lt;li&gt;Link4&lt;/li&gt;
          &lt;/a&gt;
          &lt;a href=""&gt;
              &lt;li&gt;Link5&lt;/li&gt;
          &lt;/a&gt;
      &lt;/ul&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>header{
    width:80%;
    overflow: hidden;
    color:#ffffff;
    margin-bottom:1%;
    background: #292E37;
  }
  
  header a:link {text-decoration:none;color:#ffffff;}
  header a:visited{color:#ffffff;}
  header a:hover{color:#292E37;}
  header a.active{color:#4db8ff;font-weight:bold;cursor:default}
  header h1{text-align: center;}
  
  ul.menu{
    width:40%;
    text-align:center;
    text-decoration:none;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
  }
  
  ul.menu li{
    display: inline;
    padding: 1%;
    transition: background 0.2s;
    padding-bottom:2.25%;
  }
  
  ul.menu li:hover{
    background:#a7afbe;
    transition: 0.3s ease;
    border-bottom: 3px solid #4db8ff;
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated :)
  Thanks in advance!</p>