Почему у меня происходит flex-wrap на 2-ух колонках при ширине колонок 33.333%?

Question

[Dpy3b]

https://dpy3b.github.io/Sportmarket/app/
Слайдер на Swiper.js "Популярные товары"
P.S. У этого товарища https://tony3901.github.io/logo/ код абсолютно такой же как у меня но колонки ведут себя адекватно, я смотрю в этот и свой код уже неделю и не могу понять в чём проблема

UPD. у меня в глобальном файле стилей с "настройками" было прописано

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Заменил на просто

*,
*::before,
*::after {
  box-sizing: border-box;
}

и колонки сразу встали как надо.
Хотя для слайдера прописано

._swiper>div {
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    display: flex;
    position: relative
}

Почему в первом случае колонки не вставали как нужно, а теперь встали?

UPD.2 уже запушил фикс проблемы, можете не открывать ссылку

Comments

[ForSureN1]

Когда копируете стили и структуру будьте максимально бдительными и аккуратны, любое пропущенное свойство может поломать весь сайт

[Dpy3b]

ForSureN1, я не копировал ничего, а сверял. У меня всё на rem'ах свёрстано если приглядеться.

[ForSureN1]

Dpy3b, нууууууу, сути то дело не меняет

Answer 1

[Everybody_Lies]

.items-products__column задайте box-sizing: border-box

Comments

[Dpy3b]

Everybody_Lies, призываю вас в вопрос ещё раз

[Everybody_Lies]

Dpy3b,
._swiper>div – знак > означает, что стиль действует только на непосредственные потомки
чтобы он сработал для ваших колонок, класс должен был быть у

<div class="products-slider__items items-products">

img

[Dpy3b]

Everybody_Lies, я не об этом спросил, ну да ладно. Проблему всё равно решил благодаря вашему ответу