the box model

Говоря о ширине, мы должны говорить о ней с большой оговоркой, учитывая box model(модель коробки или боксовую модель). Когда вы устанавливаете ширину элемента, элемент может фактически казаться больше, чем вы установили: граница и обивка (border and padding) элемента растянут его за указанную ширину. Посмотрите на следующий пример, где два элемента с одинаковым значением ширины, в конечном результате имеют разные размеры.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Из поколения в поколение, эту проблему решала математика. Авторы CSS всегда указывали ширину заведомо меньшего размера, чем они хотели, вычитывая поля и границы. К счастью, вам не придеться заниматься этой рутиной...