Hello! Can someone explain to me why .benefits and .benefits-list classes are centered currently but when I don’t make .benefits class flexbox, margin-auto on .benefits-list doesn’t work. This is to center both elements
If that doesn’t make sense here is a link to my code: https://codepen.io/ConnieQ/pen/gqjMMv?editors=1100
By default, block elements (like
.benefits-list) span the width of their container (
.benefits in this case).
IIRC elements in a flex container only take as much width/height as they need by default. I might be wrong though.
By removing the flex from
.benefits, it acts as a regular container, and
.benefits-list then spans its full width.
It’s easier to see by adding
outline: 1px solid red to
outline: 1px solid blue to the list. Then play around with the display properties.
Omg thank you that explains it perfectly.