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

[s24344]

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

[MC-XOBAHCK]

сделать так, чтобы при сжатии экрана не появлялся горизонтальный скролл

Убрать фиксированную ширину контейнера вот тут:

.cards__container {
  /*max-width: 1200px;*/
  width: 100%;
  margin: 0 auto;
}

или если всё таки нужно 1200px, то через медиа запрос:

@media screen and (max-width: 1999px) {
    .cards__container {
        width: 100%;
    }
}

А скрол из за этого появляется:

.cards__list-wrapper {
  margin: 0 -15px;
}

отрицательный уместен если у верхней обвёртки есть падинг, чтобы сделать на всю ширину.

Важен именно момент, чтобы по бокам не было padding.

падинг - это внутренний отступ. Что вы хотите, не совсем понятно.