Мы изменили значение justify-content и использовали внешние отступы, чтобы разделить карточки. Но в результате вместо трёх карточек в ряду оказалось всего две. Третья карточка не поместилась.

Разберём, почему так вышло. Мы добавили отступ справа всем карточкам, и у третьей карточки он тоже появится. В контейнере для него места не оказалось, и третья карточка перенеслась на новый ряд.

Кофе: длинный путь от сбора ягод до вашей кружки

Лучшие машины для дома

Советы от бариста: как выбрать хорошее зерно?

Рецепты на новогодние праздники

Чтобы вернуть третью карточку на место, отступ справа у неё придётся убрать. Для этого удобно использовать псевдокласс.

Псевдокласс — это дополнение к обычным селекторам, которое делает их точнее. Псевдокласс добавляется к селектору c помощью двоеточия. Подробнее о псевдоклассах рассказано в части «Селекторы. Знакомство».

Нам нужно убрать отступ справа у каждой третьей карточки. Для этого подойдёт псевдокласс :nth-child. Он позволяет выбрать дочерний элемент по его порядковому номеру:

// Выберет второй элемент с классом item
.item:nth-child(2) { ... }

// Выберет каждый второй элемент с классом item
.item:nth-child(2n) { ... }

Поправим наш список. Используем селектор с псевдоклассом, чтобы убрать лишний отступ справа у каждой третьей карточки.