Как использовал box-sizing: border-box

box-sizing: border-box изменяет модель расчета размеров элемента, включая padding и border в общую ширину/высоту. Без него padding и border добавляются к width/height, что может ломать верстку.

Пример:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  box-sizing: border-box; /* реальная ширина останется 200px */
}

Без border-box элемент займет 250px (200 + 202 + 52). С ним - строго 200px. Особенно полезен для:

• Сеток и колонок
• Элементов с фиксированными размерами
• Упрощения расчетов

Часто применяют глобально:

* {
  box-sizing: border-box;
}

Это делает поведение размеров более предсказуемым.