Flex Box: How do you center all items in a row?

HTML-CSS
1

Hi. I have setup a Flex Box. It has three columns. Each the second and third columns have a reverse margin, so they ‘stagger upward’. They have a gap between them. The columns are however starting at the left of the container, and they are too wide.

How do I set the boxes in the container to be centered?

So they are like this - the second version with them columners narrower.

This is the Container’s CSS at the moment to force them narrower, but ideally I’d like them to flex, but with the container to in the middle. Or to control the spacing inside the container, when it is full width, so there is space either side.

The image shown (I can only post one) has it the way it looks live now. The code is what I edited to bring it in - but then you get spacing on the right because of the width.

.breadcrumb-image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 40px 40px;
    max-width: 650px;
}

Screenshot 2026-04-27 at 09.23.09
Screenshot 2026-04-27 at 09.23.09936×555 104 KB

2

i suggest creating a codepen.io pen with your code or a sample to illustrate the issue you are trying to solve. It is hard to understand what you want to do without that.

3

Turns out, it’s a padding thing.

container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 40px 40px;
    column-gap: 50px;
    padding-left: 50px !important;
    padding-right: 50px !important;
}