Inline-block boxes

I would like to center the color boxes and have same space between them.

Any idea or suggestions are much appreciated. Thanks !

GIT: GitHub - iDuvancho303/My-style-guide: Style guide

You can put the colored boxes in a container and use margin: 0 auto; on the container. Or you can figure out the percentage space that the boxes take up then apply margin-left to the first to move everything over or padding-left to the box that they are in, in the picture.

1 Like

Use flexbox and specifically justify-content: space-between.

A Complete Guide to Flexbox

1 Like

You can center inline-block child elements by setting text-align: center on the parent. But you will have to overwrite the alignment on any elements you do not want to be center-aligned (like the h2).

But I agree about using flexbox as well.

1 Like