What you need to know
With content-box, declared width applies only to the content, so padding and borders make the rendered element wider than expected. border-box includes those parts inside the declared size and simplifies most layout calculations.
How to apply it
Apply box-sizing: border-box consistently, commonly with a universal selector and pseudo-elements. Then set widths based on the space the full component should occupy.
Common mistake to avoid
Do not compensate for content-box overflow with arbitrary negative margins. Fix the sizing model at the source and remove old workarounds where safe.