title: CSS List - align list elements perfectly into the width with an equal gap between them
body: <p>Let's keep this simple and short, I've made 2 dummy examples of my problem.</p>
  
  <p>I have a container <code>section</code> which is <code>600px</code> wide, this section will container list of products.</p>
  
  <p>each product is a 100x100 block, and there is a <code>margin</code> of <code>62px</code> between each product.</p>
  
  <p>The <code>ul</code> is set on <code>display: inline-block</code> so it won't go one under each other.</p>
  
  <p>Now in the following pen example: <a href="http://codepen.io/anon/pen/yujLf" rel="nofollow noreferrer">http://codepen.io/anon/pen/yujLf</a>
  You can see what I want to do, can you see how the first row of squares, touch the border of the container &amp; then the next element goes under?</p>
  
  <p><a href="https://i.stack.imgur.com/do75F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/do75F.png" alt="img"></a><br>
  <sub>(source: <a href="http://gyazo.com/948991c58a4edd54cf149c78d7db50d4.png" rel="nofollow noreferrer">gyazo.com</a>)</sub>  </p>
  
  <p>You can see how it's perfectly aligned for the width, as there's a perfect equal margin between each element.</p>
  
  <p><strong><em>Now this solution is a problem, because now the second row will have extra margin on the left side:</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/QUBsw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QUBsw.png" alt="img"></a><br>
  <sub>(source: <a href="http://gyazo.com/337100e784aac4785b1c53f54d7d84c3.png" rel="nofollow noreferrer">gyazo.com</a>)</sub>  </p>
  
  <p>I do have a solution for that, simply by changing <code>margin-left</code> to <code>margin-right</code> and disable <code>margin-right</code> for <code>ul li:last-child</code>.</p>
  
  <p>But if I do that, I will not be able to align the last element with the border, like I did with the first example, take a look: <a href="http://codepen.io/anon/pen/wdhrJ" rel="nofollow noreferrer">http://codepen.io/anon/pen/wdhrJ</a></p>
  
  <p>As you see, I had to change the <code>margin</code> to <code>40px</code> instead of <code>62px</code> to make it 4 elements per row.</p>
  
  <p>Is it possible to implement what I want with using <code>ul</code>?</p>