Left align children in a centered dynamic width parent

Question

I kinda can\'t wrap my head around it and it is also hard to find the proper solution on the web/here as it is hard to formulate.

Basically what I want is something

Answer 1

If you want to use media query to handle this then it will probably be something like

@media only screen and (max-width: 1280) {
   .innerBox {
        width: 20%;
    }
}

@media only screen and (max-width: 1024) {
   .innerBox {
        width: 10%;
    }
}

@media only screen and (max-width: 768) {
   .innerBox {
        width: 5%;
    }
}

These width I have are just arbitrary numbers. The width in % are also arbitrary, but if you want the boxes to fit nicely into 100% then they need to be able to divide evenly into 100. I did not include any padding or margin, I am sure you can figure that part out. Please keep in mind that media query is not supported in legacy browsers like IE8 and under. But you can download js plugins to make them work. Google is your friend