Collection List not happy with Flexbox

Help! I can’t figure this one out…

I want these collection items to take up even space within the collection list area, but for whatever reason there is still a gap around the outside edge that puts it out of align with other elements:

Secondly, how do I ensure the content of the collection lists line up? For example the first box the title goes onto two lines meaning the title of the other boxes floats in the middle when really I want the other titles to line up with the first line and all other content to line up:

The page is /driving if you get lost!

Really appreciate any help!

Here is my site Read-Only: Webflow - Golden Moments USA
(how to share your site Read-Only link)

Is any one able to help?

I’ve been trying to figure this out all afternoon yesterday and all morning today :see_no_evil:

I think I accomplished what you are looking for, but I don’t suggest it. It looks fine on desktop, but not on anything else.

Thanks for having a go.

My thoughts would be on mobile it would respond down to 2, then 1 columns?

I highly suggest playing with this setup.

Solved it!

Realised Collection Lists don’t seem to like margins, so used padding instead and added another Div for my outline, then used separate divs as you suggested for the content inside. Also realised keeping to even numbers will work better when responding down: