В обычном CSS у нас марджины не ограничиваются границами родителя, они как-бы проникают сквозь его границы. Это очень толковое решение, но не всегда оно нам полезно. Как с этим бороться? Нам надо "обмануть" движок, и дать ему знать, что после последнего дочернего элемента у нас есть ещё какой-то контент, и чтобы марджин нашего последнего дочернего элемента не вылазил наружу, а "спотыкался" об этот невидимый контент.
Добавляем в начало и в конец родительского блока невидимый контент нулевой высоты при помощи ::after и ::before. При этом идеальным значением свойства display этого невидимого контента будет table, т.к. оно работает именно так, как нам надо, а именно, имеет нулевую высоту по умолчанию.
Если же, вдруг, вас по каким-то причинам не устраивает этот псевдо-контент внутри блока, то подобного поведения можно добиться при помощи обычного свойства overflow со значением hidden. (Однако при этом мы лишаемся некоторых других возможностей, потому что всё, что находится внутри этого блока, но должно выходить за его границы, будет скрываться.)
Ну, и на самый крайний случай, если уж и предыдущие два не устроят, то старый добрый float: left; никто не отменял ))))
Ну и, наконец, модерновое супер-дупер решение на флексах. Однако тут нам придётся "городить" стили для внешнего контейнера, который содержит ваши блоки внутри себя. Мне кажется, что это введение ненужных лишних сущностей, которые могут обернуться сюрпризом когда-нибудь потом, т.к. мы связываем намертво основной родительский контейнер с дочерними...
Простой
Средний
