Reply To: CSS Centre and Left align

[Beverleyh]

I only want the green box centred, and the red box left aligned inside.

For that to happen, and the green box not to span full-width, you need to cap its width as previously explained.

setting a width of 80vw is not a solution because the green container is no longer wrapping tightly around the red boxes.

I’m sure that was just a suggested “for instance” because we don’t know what your wrapping threshold number is. You would set the actual width to whatever is needed to fit however many boxes you want visible in one line, and change that figure inside media queries based on device width breakpoint so that it looks desirable in different viewports/resolutions.

When they start overflowing, instead of the green box staying centred, while the red boxes overflow in a left-aligned fashion, the green container simply takes up 100% width, and it looks like the green boxes are just left aligned within the blue body, when you ignore the colour of the container.

This is just circling back round to restricting the width of the green box so that it doesn’t take up 100% width.

I’m sorry but I can’t explain it to you any more clearly.