How make 4 items fit perfectly inside the container - html

Question

Codepen - http://codepen.io/anon/pen/ZGYQej
I need to make 4 items fit perfectly inside a container and each item must have 5px margin of the other. I'm trying to do but it is never perfect, what do I mean by perfect? The first item should be in the far left, and the last at the far right, and yet the four items need to be far apart with 5px .
Code:
HTML:
<section class="statistics">
<div class="container">
<h2 class="statistics__title">Estátisticas</h2>
<ul class="statistics__list">
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
</ul>
</div>
</section>
CSS:
.container {
box-sizing: content-box;
padding-left: 3%;
padding-right: 3%;
margin-left: auto;
margin-right: auto;
}
.statistics__title {
margin: 15px 15px 15px 0;
font-weight: lighter;
}
.statistics {
width: 100%;
}
.statistics__list {
margin: 0;
padding: 0;
list-style: none;
}
.statistics__item {
margin: 0 5px;
display: inline-block;
width: 23%;
height: 230px;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}

Answer 1

Try usin the pseudo-class :last-child on .statistics__item
This way you can give all elements margin-right:5px except for the last element, causing the first item to be in the far left, and the last at the far right while the four items are seperated with a margin of 5px.
box-sizing:content-box;
padding-left:3%;
padding-right:3%;
margin-left:auto;
margin-right:auto;
}
.statistics__title {
margin: 15px 15px 15px 0;
font-weight: lighter;
}
.statistics {
width: 100%;
}
.statistics__list {
margin: 0;
padding: 0;
list-style: none;
}
.statistics__item {
margin-right: 5px;
display: inline-block;
width: 23%;
height: 230px;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}
.statistics__item:last-child {
margin-right: 0px;
}
<section class="statistics">
<div class="container">
<h2 class="statistics__title">Estátisticas</h2>
<ul class="statistics__list">
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
<li class="statistics__item"></li>
</ul>
</div>
</section>

Answer 2

This possible solution involves CSS flexbox, check out the demo below.
.statistics__title {
background: silver;
}
.statistics__list {
list-style: none;
padding: 0;
margin: 0 -5px; /*get rid of the left margin on 1st item, and right margin on 4th item*/
display: flex;
}
.statistics__item {
background: gold;
flex-grow: 1;
margin: 0 5px;
}
<section class="statistics">
<div class="container">
<h2 class="statistics__title">Estátisticas</h2>
<ul class="statistics__list">
<li class="statistics__item">1</li>
<li class="statistics__item">2</li>
<li class="statistics__item">3</li>
<li class="statistics__item">4</li>
</ul>
</div>
</section>
JSFiddle: http://jsfiddle.net/b0t9m95L/