box model

Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: la propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferente tamaño al final.

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

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

Por generaciones, la solución a este problema han sido las matemáticas. Autores de CSS han tenido que escribir valores más pequeños para width de lo que en realidad querían, restando el padding y border. Afortunadamente ya no tienes que hacer eso...