Мы задали карточкам ширину и внутренние отступы. Пока карточки выстроены сверху вниз, а нам нужно расположить их в ряд. Используем для этого флексы.

Первая и последняя карточки в ряду должны прижиматься к границам контейнера, а свободное пространство нужно распределить равномерно между всеми карточками. Для этого подходит свойство justify-content со значением space-between.

Карточек в списке может быть много. Поэтому добавим ещё несколько штук в наш список и разрешим флекс-элементам переноситься на новую строку. Мы уже делали это, когда верстали навигацию.

Итак, превратим список карточек во флекс-контейнер и зададим ему выравнивание по главной оси. После этого добавим в список ещё пару карточек и, чтобы они не выпадали, сделаем флекс-контейнер многострочным.