The box model, the cascade and specificity

Every element is a box made of layers: the content, then padding, then a border, then margin outside it. This is the box model. By default, width sets only the content, so padding and border are added on top.

That is why most projects set box-sizing: border-box, which makes width include them. Sizes can be fixed pixels or relative units such as rem, which grow with the user's font size. The cascade decides which rule wins when several apply to the same element.

It looks at origin and importance first, then specificity (an id beats a class, and a class beats an element name), then source order, where the later rule wins. Most "CSS is broken" moments are one of two things: a box larger than you expected, or a rule overridden by something more specific. Open DevTools, select the element, and read its computed box and the crossed out rules.