title: Safari vs Firefox: Strange UL "padding"
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;article class="images"&gt;
    &lt;ul class="cf"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;img src="http://www.placehold.it/800x600" alt="" /&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code> * {
    margin: 0;
    padding: 0;
  }
  
   .images ul {
    margin-left: -3%;
    width: 100%;
    background: red;
  }
  .images li {
    list-style-type: none;
  }
  .images li img {
    width: 17%;
    margin-left: 3%;
    margin-bottom: 3%;
    float: left;
  }
  </code></pre>
  
  <p>Still, in Safari the <code>ul</code> seems to have some kind of padding on the right.<br>
  In Firefox the <code>ul</code> is displayed correctly.</p>
  
  <p>See it for yourself: <a href="http://jsfiddle.net/EdCXx/" rel="nofollow noreferrer">http://jsfiddle.net/EdCXx/</a></p>
  
  <p>Is there any way to fix that?</p>
  
  <p>Edit: With Safari 6.0.2 on OS X 10.8.2 it looks like this:<br>
  <img src="https://i.stack.imgur.com/aTGnO.png" alt="enter image description here"></p>