Почему “едут” размеры некоторых элементов? По умолчанию (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 | #совет