See attached screen shot of this CMS collection list in a flexbox. I cannot figure out why the children aren’t aligned anymore. It is as if the first card has margin-left and the last card has margin-right.
They were perfectly aligned, then “suddenly” they weren’t. If you ask me, I’ve tried everything – and can’t fix it.
Would love for someone to point me in the right direction.
Here is my site Read-Only: LINK
Yeah… there’s no magic 
There’s a GAP flex property, that’s not supported by all browsers at the moment, but will in the near future solve this issue.
Devs used to use a .last combo class on the last element of a list to nuke the right margin. But with Collection List, that’s not the most straight forward thing to do.
Some designers will declare a 3 columns thing with each col at 32% and the flex set to space-between, so that a natural gap happens. If the cols are set to grow, then you can achieve your layout.
For now you can use an Embed component on the page and add CSS code to target the last col item of the col list, and nuke the right margin. For this, you’ll use a pseudo class :last-of-type.
.class-of-you-collection-list-element:last-of-type {
margin-right:0;
}
Oh, thank you so much, but I think I don’t quite get it:
I just. tried, and the issue still persists in Chrome.
<style>.CMS--Single__card_base:last-of-type {
margin-right:0;
}
</style>
Also tried targeting the list as you actually said:
<style>.CMS--related__collectionlist:last-of-type {
margin-right:0;
}
</style>
No luck
You should try using the same logic as webflow columns :
Children columns have padding of x and exact desired width > Parent Row has negative x margin.
Works like a charm