O box model

Enquanto falamos de largura, também devemos falar sobre o maior problema da propriedade width: o box model. Quando você define a largura de um elemento, este elemento pode parecer maior do que o definido: as bordas - border - e o preenchimento - padding - vão esticar o elemento além da largura definida. Veja o exemplo a seguir que demonstra dois elementos com os mesmos valores para a largura width, porém com tamanhos diferentes.

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

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

Por gerações, a solução para esse problema tem sido a matemática. Os autores de CSS sempre escreviam simplesmente um valor de largura menor do que queria, subtraindo o valor do padding e border. Felizmente, você não precisa mais fazer isso...