Flex along with a .container doesn't work

HTML-CSS
1

I’ve completed this technical documentation exercise.

Just that the page looks too wide on a wide screen and I thought instead of changing the individual flex elements, just add the (already used on flex elements) container class to the #main-doc element.

This removes the display: flex property that I have applied on the same.

If I wrap the #main-doc element with a separate div.container element then it works.

Why does this happen and why can’t I use it on the main element?

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

Link to CodePen:

2

hi @gouthamganesan

have you read this

if not, you should try.

happy coding