Почему “едут” размеры некоторых элементов?

По умолчанию (box-sizing: content-box) width и height задают только размер контента, без учёта padding и border. Из-за этого элементы становятся больше, чем ожидаешь, и layout ломается:
.box {
width: 200px;
padding: 20px;
}

Фактическая ширина здесь будет 240px, что часто приводит к переполнениям:
.box {
box-sizing: border-box;
}

Теперь padding и border учитываются внутри заданной ширины, и итоговый размер остаётся 200px:
*,
*::before,
*::after {
box-sizing: border-box;
}

Поэтому это правило обычно задают глобально, чтобы вся верстка стала предсказуемой.

Это снижает количество проблем с размерами и делает layout стабильнее.

Code Ready | #совет