If you want
.star-card to be placed using flexbox it has to be a flex item. Right now it’s only a flex container (so it can move its own content using flexbox, but it can’t itself be moved). You have to make
.star-card-container a flex container so its child elements (
.star-card) can be moved using space distribution on the parent and/or self align on the children.
One possible option:
/* align all children horizentally in the center */
/* align first card to start */
/* align last first card to end */
Make the parent a flexbox container and use one of the distribution/alignment options for the content (flex items) to center them all (the auto margin on the first and last will still work). You can use the same code as posted above just with first and last child elements using auto margin instead of
Just as an aside you can’t just give all the
.star-card bottom margin to create the gap between the elements, as that will push the last element away from its containing box. You can use top/bottom on the center, or not target the last element for the margin. For Chrome and Firefox, you can just use
gap: 0.5rem on the flex container (check browser support).