NO BUG: Right margin wont be applied

Hello,

after setting up multiple container with 20px margin right and left without a problem, its not working anymore.

Only the left margin gets applied. See video attached. If i copy an already set up container i have no problems changing the margin on the right site.

I have no clue…

Im using the newest Bricks Version.

I disabled all plugins.

I turned my pc on and off and drank a relaxation tea :rofl:

Bildschirmaufzeichnungvom2024-12-0322-27-16-ezgif.com-video-to-gif-converter

I found this thread:

with a css code that “fixes” the problem:

root {
width: calc(100% - 2em);
}

But the question is why i could do ith without extra css the last 96 hours and now i cant anymore.

I really need an explanation to it or i will loose my mind, im not joking.

Thanks

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”…

i realized when i apply 100px margin all around, a scroll bar appears and the container extended 100px to the right instead of applying the margin.

Bildschirmaufzeichnungvom2024-12-0402-56-21-ezgif.com-video-to-gif-converter

Hello, @echtprallerpavian

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.

2 Likes

Hi @echtprallerpavian,

I’ll mark this topic as a no bug, since it’s not really a bug, but a way that CSS works. :slight_smile:

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. :slight_smile:

Best regards,
Matej

1 Like

Hello, yes i understand what youre saying, thats what i read somewhere else too.

But why did it work the way i was doing it for days and suddenly stopped working. there must be a reason for that.

Sorry it seems i dont understand.

width auto doesnt make the block / container 100% wide.

Giving a block margin left and right doesnt work neither.

What am i doing now? Why is it not working anymore? What is happening. i dont understand…

how in the world do i make a container 100% wide (full screen size) and give it a margin of 20px left and right.

Does your cointainer is inside a section?

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:

  1. For your section element give a class of .section than give that class the align-items:unset property.
  2. 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.

1 Like

So if my container is inside a section you recommend to give a class to the section and give that class the align-items:unset property.

Then i place a div in that section…

What will happen to my container then?

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.