00:00 A great tool here to share this horizontal space and have some fluidity of the space used is going to be Flexbox. So I'll delete this paragraph and instead we'll have an unordered list and we'll set that to flex and give it a gap of 4.

00:14 And let's quickly add 4 LI items and we'll give them a background color of BG Rose 300, a height of let's go custom with 500 pixels, doesn't really matter. And let's also give them a width of full. Now if we look at this in the browser, we won't see anything.

00:31 An ordered list is completely squashed and the only space it's using is the gap. And so we need to tell the first child, so our list, to use all the possible space with width full. Okay so now we see our 4 cards and let's also add a max-width container so it doesn't use the whole width.

00:49 And we'll use max-width 6XL. Alright very nice and at this point we're going to replicate the same styles for each card. So if we wanted rounded corners for example, I'd need to add this 4 times, rounded 2XL.

01:03 And so really here we should create a component to avoid repeating ourselves or even better here I'll just use a little loop.