By default, the dimensions of a box are the dimensions of the box's content plus its padding and border values (implicitly: box-sizing: content-box). So if you set an element to be 10rem wide and with 1rem padding on either side, it will be 12rem total. Using box-sizing: border-box will instead reduce the content area to account for padding and border values; so 10rem wide instead.

Generally, it's preferable to use border-box for all boxes to make anticipating box dimensions much easier. So as a common universal rule:

* {
  box-sizing: border-box;
}

This is of course not needed in every layout, especially simpler sites.