Why does using flexbox to center this list work but not margin: auto

HTML-CSS
1

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

.benefits{
display: flex;
flex-direction: column;

}

.benefits-list{
margin: auto;
}

versus

.benefits{

}

.benefits-list{
margin: auto;
}
If that doesn’t make sense here is a link to my code: https://codepen.io/ConnieQ/pen/gqjMMv?editors=1100

2

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 .benefits and outline: 1px solid blue to the list. Then play around with the display properties.

3

Omg thank you that explains it perfectly. :smile: