justify-content: space-between elements are not at the edges

Question

I have the problem, that the items do not use the full width. In the codepen they use the space better than in my original code, but they also dont use the full width and I really dont know why.

The differenze between space-between and space-around are minimal which they shouldnt be. (not tested in this codepen)

http://codepen.io/notyetnamed/pen/KdMqJV

HTML:

<div class="wrapper">
    <h2>Lorem Ipsum</h2>
    <ul class="cf">
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>
    </ul>
  </div>

<div class="wrapper">
    <h2>Lorem Ipsum</h2>
    <ul class="cf">
      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>lorem</h3>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="http://lorempixel.com/180/180/" alt="">
          <h3>Lorem</h3>
        </a>
      </li>
    </ul>
  </div>

CSS:

.wrapper {
  margin: 0 auto;
  max-width: 1256px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  width: 100%;
  border: 1px solid black;
}
.wrapper ul {
  border: 1px solid red;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -ms-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  &:before {
    content: " ";
    display: table;
  }

  &:after {
    content: " ";
    display: table;
    clear: both;
  }
}
.wrapper ul li {
  border: 1px solid green;
  max-width: 186px;
  width: 15.30%;
  list-style: none;
}

Answer 1

padding: 0; and removing the clear fix (which I overlooked...) solved it.

Thanks to all!