SOLVED: Margin L & R Auto overides Flex settings

Bricks Version: 1.5
Browser: FF Dev
OS: macOS / Windows / Linux / etc.

Hey

I have a container that takes up 68% max-width after 1.5 update it remains centre aligned. Applying flex align content to start does not have any effect. The is due to the L&R Auto margin on .brxe-container

The only way to get it back left aligned is to add 0 margin-left

Thanks

Mick

Hey Mick,
yes, that is correct. The margin-left/right has priority over the flex align options.
There is, of course, also a CSS tricks article about flexbox and margins: The peculiar magic of flexbox and auto margins | CSS-Tricks - CSS-Tricks

In general: The container’s job is to center your content (and give it a certain default (max-)width).

You can change this behavior either via the theme styles (for each container) or just for the containers that deviate from the default - then you have to overwrite the defaults, of course (margin-left/right: 0).

If you want to keep the container’s actual behavior, I would recommend putting your content in a block or div element and limiting the width there. This way, you keep a clean structure (Section > Container > Block/Div) and don’t bother with overwriting defaults :smiley:

Best regards,
timmse

Thanks Stefan,

I had already switched it out to a block. :slight_smile:

1 Like