Puede haber una solución simple para esto, pero ahora me ha preocupado ...

Déjame explicar la situación. Tengo un div con el ID 'contenedor' que contiene todo el contenido de la página (incluido el encabezado y el pie de página también) que mantendrá todo en línea y puedo hacer solo 1 simple 'margen: 0 automático;' en lugar de múltiplos. Entonces, digamos que tengo el ancho de #container establecido en 80%. Ahora, si pongo otro div dentro con el mismo ancho (80%) y le doy la identificación de 'encabezado' con 10px de relleno, el diseño se "rompería" (por así decirlo) porque la página agrega la cantidad de relleno en la anchura. Entonces, ¿cómo puedo hacer que se mantenga dentro de los límites sin usar métodos como un porcentaje menor para el #header div? Básicamente, quiero hacerlo fluido.

Aquí hay un código de ejemplo para darle una idea de lo que estoy hablando ...

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

¿Alguien puede ayudarme con este problema que me ha estado molestando desde siempre?