How to Left-Align the Last Row in a Centered Inline-Block Grid without Flexbox?

Left-aligned Last Row in Centered Grid of Elements using Display Inline-Block

The objective is to create a centered grid of blocks while ensuring the last row aligns to the left. Without resorting to Flexbox or adding extra filler divs, here's a CSS-only solution:

Adaptive Grid using Display Inline-Block

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin:0;
padding:0;

Copy after login

}

container{

font-size:0;
margin:0 auto;
width:1000px;

}
.block {

font-size:20px;
width: 150px;
height: 150px;
margin:25px;
background: gold;
display:inline-block;

}

@media screen and (max-width: 430px) {

#container{
    width:200px;
}

}

@media screen and (min-width: 431px) and (max-width: 630px) {
#container{

    width:400px;
}

}
@media screen and (min-width: 631px) and (max-width: 830px) {
#container{

    width:600px;
}

}
@media screen and (min-width: 831px) and (max-width: 1030px) {
#container{

    width:800px;
}

}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Copy after login