title: center middle li of evenly spread li in a ul
body: <p>I have a jsfiddle <a href="https://jsfiddle.net/jacky_lei/91fg280v/" rel="nofollow">here</a> of my issue. I want to evenly distribute an unknown number of <code>li</code>s inside a ul. But as you can see from the fiddle, the middle li is not directly under the the header, so it's not correctly centered. Also if you inspect each of the <code>li</code>s, they have different widths.</p>
  
  <p>How do I fix it so that the middle <code>li</code> will always be in the middle, so as to align with the header?</p>