Правило *, *::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.