box-sizing: border-box на :root и расчёт ширины

Правило *, *::before, *::after { box-sizing: border-box } (или на :root с наследованием) включает padding и border в заявленную width — сетки на процентах не ломаются.

Исключения: сторонние виджеты, ожидающие content-box — изолируйте их обёрткой.

- [box-sizing — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) — content-box и border-box.

- [Box model — web.dev Learn CSS](https://web.dev/learn/css/box-model) — Размеры блока.

---

## calc

С border-box реже нужен width: calc(100% - 32px) для учёта padding.