Flex box margins/padding

Getting a lot of cool stuff working now, Blocs Plus 4 is a nice upgrade from my previous Blocs 2, thanks @Norm! :smiley: :clap:

Trying to figure out why I get this padding/margin left and right for LG and MD, for this global header, being one row, column with 3 divs as flex.

In LG and MD it has this margins:

In SM and XS it doesn’t have those margins/that padding, but I have another issue, trying to figure out how to make the social icons and logo stick top-aligned/with the first line of the header. I tried all kinds of stuff to make start at the top/beginning, no luck:

Looks like the margins/padding for the divs are that the flex containers doesn’t expand, but just center in their part of the column/row:

I’m very thankful if anyone has suggestions here. :sunglasses:
Let me know if I should share more details, tried including the most relevant stuff and not too much. Full preview is found at :rofl:
CSS and all these possibilities are awesome, but also able to make my tired head explode :exploding_head: … I think. :stuck_out_tongue_closed_eyes:

Maybe the inspector tells you something I’m not seeing, or that I should share here(?):

I did a video just after Blocs 4 came out explaining the basics of flex. It may help. Probably need to update this one at some stage.

1 Like

Thanks! Nice video, @Malachiman! :slight_smile:
I did have the concepts of flex grasped, but your repetition made me realize I had selected Space Around instead of Space Between for the wrapping class (.header-flex-divs), so changing that fixed the left and right margin/padding.

But I still struggle figuring out why I can’t seem to make the first and last div content to stick at the top … Usually it’s something obvious hidden in plain site for these kinda things … :sweat_smile:

Edit: Indeed, without typos, setting Align to Start for SM breakpoint (and adding some margin-top) did work. :smiley:

All good now:

Thanks! :smiley: