JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Shrink horizontally the result section until you get 5 (or 4) blue boxes in the first row … 
The second row is not aligned on the left side. 
And if  the container has a "text-align:left", the boxes on the first row are not dispatched evenly inside the container anymore -->
.
<div id="container"> 
<div class="pic_bloc"></div>
<div class="pic_bloc"></div>
<div class="pic_bloc"></div>
<div class="pic_bloc"></div>
<div class="pic_bloc"></div>
<div class="pic_bloc"></div>
<div class="pic_bloc"></div>
</div>

CSS

body{margin:0px;padding:0px}

#container {
    text-align: justify;
    width:100%;
    background:red;
}
.pic_bloc {
    width: 96px; 
    height:96px; 
    display: inline-block;
    vertical-align: top;
    margin-bottom:30px;background:blue;
}

#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}