Width <100%; margin: auto; doesn't work here. Why?

HTML-CSS
1

Hi everyone,
could you please help me understand why I need flexbox to center horizontally the dropdown menu in this pen, and why the usual method (width <100%; margin: 0 auto;) doesn’t work as expected?
I guess it’s something related to its content, but I really can’t understand why it doesn’t work :face_with_monocle: .
Thank you.

2

Hi @Marco16168

Try making your button a block element

display:block;

Thank you.

3

That’s because you’re centering .container div not it’s contents. Try adding border to .container to see what gets centered.

4

I see. I was trying to center the wrong element.
I often use the border trick to try and visualize better what is going on but that didn’t come to my mind this time.

Well, I really don’t see why I couldn’t before, that’s why I added a div element to wrap everything. That was useless.
Seems obvious now, but I swear I passed the last half-hour in total confusion!
Thank you @jenovs

Doesn’t work but thank you anyway