Reply To: CSS Centre and Left align

[Beverleyh]

As you can see, the green box is full-width even though there is a massive gap on its right, it’s no longer wrapping around it’s contents, but behaving like a block element.

Yes, it’s full-width because the red blocks inside, which sit along one row, have an accumulated width that is at least as wide as/wider than their container. The horizontal margins add to the overall width of the inner red blocks too.

In code terms, the inner elements are all in one row even if they don’t look it. If you create shorter rows of red blocks by inserting a manual <br /> after every second one, you can see it behaving as expected. But this is not good practice, so like I said before, try restricting the width of the green box by adding a width or max-width to make it look like your second image.