title: Center the li and the margin of the last child
body: <p>I am trying to center a ul and the li inside. I think the problem is the left margin of the last li. I tried two things but it does not seems to affect. What is the problem ?</p>
  
  <p>CSS: </p>
  
  <pre><code>ul {
      position:relative;
      width: 640px;
      margin:40px auto;
      padding:0;
      list-style-type:none;
  }
  
  ul li {
      float:left;
      position:relative;
      width: 100px;
      padding: 0px;
      margin-right: 10px;
      background-color: #f2f2f2;
      display: block;
      height: 30px;
      line-height: 30px;
      text-align:center;
      font-family: verdana; 
      font-size:10px;
      color: #666
  }
  
  ul li:last-child { margin-right: 0px; }
  /* ul li.last-item { margin-right: 0px; } */
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt; first &lt;/li&gt;
    &lt;li&gt; second &lt;/li&gt;
    &lt;li&gt; third &lt;/li&gt;
    &lt;li&gt; fourth &lt;/li&gt;
    &lt;li&gt; fifth &lt;/li&gt;
    &lt;li&gt; sixth &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have it here life: <a href="http://jsfiddle.net/a4aQN/" rel="nofollow">http://jsfiddle.net/a4aQN/</a></p>