Understanding CSS (max-width)

Ask us anything
1

Goal: Make the SAAS product have a max with so it doesn’t stretch on bigger screens and look funny.
Issue: Using max-width, forces child elements to the center of the screen. Why?

In the first picture you’ll see when I have the parent container (green) selected and the max-width is blank, sent to a for auto I assume, the child elements are unaffected outside of the parent’s padding.

Second picture you see that I’ve placed a 1440px max-width on the parent and it forces the 2 child elements to the center of the screen. Only way for me to get them somewhat closer to the SideNav is the try and use negative margins, which isn’t ideal.

Can someone educate me on what’s happening here?

PS: either way, the container (green) will still expand as far as my screen will go to the right (i have a 32in monitor), regardless if i have a max-width or not. Is this normal?

Thank you for your help.

Capture1
Capture13434×1236 124 KB

Capture`
Capture`3434×1242 163 KB

2

Hey @samtay32

There is an added property align-items: center added to the (weweb-generated) wrapper of the section. That means that the element inside — in this case, the section — will be centered.
The background color is also applied to that wrapper. And since the wrapper’s size is taking up the whole width, then the color will fill the page.

I’m not sure what’s your desired outcome is. But usually, I like to handle the max-width with a nested div inside of my section. That allows me to have more control :slight_smile: