Как правильно сделать следующую верстку?

Question

[s24344]

Ребята, подскажите, пожалуйста. Как в данном случае, используя именно такую структуру, а также display: flexbox сделать так, чтобы при сжатии экрана не появлялся горизонтальный скролл (не используя на html или body overflow-x: scroll;). А также важно, чтобы не было отступов padding у обертки, т.е. не было отступов по бокам у viewport.
https://codepen.io/s24344/pen/xQEpOR
Важен именно момент, чтобы по бокам не было padding.

Answer 1

[Алексей Пахомов]

.cards__list-wrapper {
  margin: 0;
}
.cards__item:first-child, .cards__item:nth-child(5n) {
  padding: 0 15px 0 0;
}
.cards__item:nth-child(4n) {
  padding: 0 0 0 15px;
}