My containers margins are "locked"

Hi all,

My container margins suddenly become “locked”. I am using the class I used before and it was not blocked before. If I add a new container it also comes with blocked margins.
Parent element “Body” is a block element (not flex)

Where did I mess up? Please help. I did not find the answer online.

here is the link if needed

Hi Mira! Containers are locked by default, this is expected behavior. If you want to expand the width of a container element, you’ll just want to adjust your max width, which is currently set to 80%. Personally, I will always opt to use Div Block instead of Container for this reason. Hope this helps!

Hi Coleman,

I am so confused because I have not seen the “warning” from the above screenshot before.
Could you please look at my homepage? The first “Wide wrapper” used in the first section is with the locked margins, and the next “Wide wrapper” is normal, as I used to see it.
Could one of them be a container and another a dev?

How can you tell what you are looking at - container or a div block (if it’s already on the page)?

Yes, I apologize, I should have been more detailed in my response.

Your first ‘wide wrapper’ is a Container element. That is indicated by this icon. image

Your second ‘wide wrapper’ is a Div Block element, indicated by this icon. image

That explains why you’re experiencing different behaviors between them. Functionally though, they are basically the same. A Container is just a Div Block with forced styling to assist users with responsiveness.

Hi Chris,

Thank you for explaining the difference between them.
I am still puzzled as I am seeing this:
One container have margins locked, and another - not. They are same class, on the same page.

How can it be happening?
The one with locked margins is not centered when going to other breakpoints. It’s behaving oddly.


The first image you posted is using a Section element. The second is using the Container element. A section element uses 100% of the width of the website by default (but can be adjusted with your margins). A container element is the one that has a fixed width.


Thanks for being so patient with you me :slight_smile: I figured the difference now and fixed it.

Of course. Happy to help!