https://medium.com/javascript-in-plain-english/finally-ive-mastered-trivial-css-63c1f5ee6800

Note: what I already answered to you in the article linked above I will not repeat here.

---

My favorite saying is, from Lincoln, "You can catch more flies with a drop of honey than a bucket of gall.".

I am used to saying "bears" instead of "flies".

And right now I would say "You catch more developers with a few lines of code than with thousands of hard words".

I've tried your code at Pen, thanks, it helps a lot. I had to assemble it in an HTML file, I think I did it right.

My first impression was, "The Jason's code works fine!".

Then I made a few tests and came to this:

1) Using 4 boxes and window inner width being 1162px: all boxes are in the same row; the width of each box is 261.45px plus padding of 11.62px. Who wants 261.45px width (82% of the IPhone 5 screen width) for content when the window is almost 1200px?

2) Using 4 boxes and window inner width being greater than 1520px: all boxes are in the same row, but the width of each box is ALWAYS 340px plus padding of 17px. And they keep concentrated in the center of the screen, leaving big margins on the edges (left and right) of the window. Besides you having a box width smaller than the basic Android width (360px), HOW RESPONSIVE IS THAT?

3) Using 4 boxes and window inner width being 910px: first 3 boxes are in the first row; the width of each box 279.08px plus padding of 9.1px. The fourth box in the second row. All boxes share the SAME CONTENT. But the fourth box is WIDER (340px plus padding of 9.1px). I would be ASHAMED of publishing a webpage like that.

Thanks, but no, thanks. I don't need more tests.

Jason, you cannot imagine how glad to you, I am right now. After running your code, I feel my article and template sooooooooooooooooooooooooooo VALIDATED :>)

Maybe you should start to "micromanage" your layout?

Cheers!