In the standard CSS box model, width and height affect only the content box

CSS offers two box models: standard and alternate. These two models dictate which parts of the box width and height affect. In the standard, they only affect the content box–the padding and border are added after. In the alternate, the padding and border are considered with the width. To use the alternate box model, set box-sizing to border-box. To make the entire page use the alternate model, modify the html element to use box-sizing: border-box and make all the elements beneath it inherit it:

  html {
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }