Неправильное расположение блоков шириной 50%, не знаю почему

Question

Я применил пользовательский контейнер к файлу шаблона WordPress Categories, установил ширину на 50%, сместил его влево, но после третьего экземпляра макет выходит за рамки ожидаемого.

У меня естьпопытался изменить типы отображения, проверил повторное появление в других браузерах (это происходит как в Chrome, так и в Mozilla Firefox).Я также попытался применить очистку к контейнеру.

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.category .post-block {
    width: 50%;
    padding: 1em;
    float: left;
}

https://imgur.com/a/JtdcN3L (пока не достаточно повторений для публикации изображений)

Местоположение наблюдаемой проблемы:

https://streamershaven.blog/category/hardware/

Answer 1

Вы должны учитывать отступы, поля и границы как часть общей ширины элемента.

Боксовая модель "Content-Box":

"Общая ширина элемента = ширина + левый отступ + правый отступ + левая граница + правая граница + левый край + правый край"

Модель CSS Box

Answer 2

Решено с использованием описанной модели flexbox https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Откат для поддержки браузера вместо.