Eso es así por el
modelo de caja de CSS.
Básicamente lo que hace es que el ancho sea igual al ancho más el relleno (
padding
) y otras cosas, que verás en el artículo.
Soluciones hay muchas. Yo lo que suelo hacer es cambiar el modelo de caja para que esas cosas se añadan de forma interna y no se sumen al ancho del elemento con: