box-sizing

box-sizing is the method used to compute width and height.

The default box-sizing mode is content-box, which is not easy to reason about usually. The thing that makes it hard is that the width/height are computed like:

rendered_width = width + padding + border

So if for instance you have two elements with the same width but different padding, the width will be different, which is not what you expect usually. Things can get even uglier when nesting elements.

There is another mode which is called border-box. That basically uses the rendered_width as computed above as the actual width of the element. This solves the issues:

* {
    box-sizing: border-box;
}

There may be benefits to content-box in some instances, but using border-box as a default it's the better option in my opinion. You could always switch back to it locally if you need.