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

i have problem, items not use full width. in codepen use space better in original code, dont use full width , dont know why.

the differenze between space-between , space-around minimal shouldnt be. (not tested in 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; } 

you can use box-sizing property border-box adjust how sizes calculated.

for ease of use, added elements, optimisations highly suggest add elements need added to. should css anyway.

as issue width, perhaps removing width: 15.30%; solve that, exemplified below.

* {    box-sizing: border-box;  }    .wrapper {    margin: 0 auto;    max-width: 1256px;    padding-left: 20px;    padding-right: 20px;    position: relative;    width: 100%;    border: 1px solid black;  }  .wrapper ul {    padding: 0;    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;  }  .wrapper ul li {    border: 1px solid green;    list-style: none;  }

<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>

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp