title: Menu will not center
body: <p>I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
     &lt;div class="header"&gt;&lt;/div&gt;
     &lt;div class="Header"&gt;&lt;/div&gt;
     &lt;ul class="menu"&gt;
       &lt;li&gt;Home&lt;/li&gt;
       &lt;li&gt;Over mij&lt;/li&gt;
       &lt;li&gt;Mijn diensten&lt;/li&gt;
       &lt;li&gt;Contact&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper {
    width: 100%;
  }
  
  .menudiv {
    width: 80%;
    border: 1px red solid;
    margin: auto;
  }
  
  .menu {
    text-align: center;
    border: 1px red solid;
    position: relative;
    display:inline-block;         
    transform: translateX(-50%);
    left: 50%;
    color: black;
    padding-left: 20%;
    padding-right: 18%;
    min-width: 80%;
    max-width: 80%;       
  }
  
  .menu li {
    float: left;
    display: block;
    padding-right: 5%;
  }
  
  .menu li:after {
    content: '/';
    padding-left: 20px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sdzLn5hd/" rel="nofollow">https://jsfiddle.net/sdzLn5hd/</a></p>