As you can see a margin of 100px is applied all around the container, but its not getting “applied” to the right site / or in other words is not “visible”…
The best way is to not add unnecessary css that breaks the natural behaviour of block elements.
Block elements will by default have a width value of auto which is more useful than width: 100% because it will naturally fill the width of its container taking into account any margins and borders.
When you have width: 100% and a 50px margin, the width the element takes up is 100% + 100px (50px each side) which will exceed 100% and thus overflow the container.
So in this case you can use the width auto on your container and it should work properly.
Just be aware that Bricks Section elements has a align-items:center property on the .brxe-section class which will make any container inside centered. You will need to give sections a class and put align-items: unset to make your div work as you want.
I’ll mark this topic as a no bug, since it’s not really a bug, but a way that CSS works.
I think @simotamas7 explains it well, but I would just like to add that if you want to add some margin/padding to all containers, you can do that in Theme Styles, under Element - Container settings.
If so the container wont take the 100% width with auto because as mentioned above bricks section element has a style of align-items:center.
I would recommend the following:
For your section element give a class of .section than give that class the align-items:unset property.
Place a div inside your section and give a class to it. To that class give a width: auto and set the margin left and right to 20px.
If your container is inside a section you must do the first step in order to the container take the full width with the auto property.
Are you sure you used exactly like this before when it worked?
Was that also a container or rather a div?
If it was a container was it inside a section?
If there was. Did you put any other css to the section or the container itself?
As the inspect screen you attached. There is a container inside another container which is inside a section.
What do you mean by container? You can use a div as a container or you can let your container inside your section, just make sure that you set the default container width settings on the template settings.