Problema con scroll horizontal

[neutrino]

Hola, tengo una página en la que centro horizontalment un div con ancho fijo (972px) dentro de otro div con ancho 100%. Para una resolución de 1280px, la página se ve centrada, a medida que redimensiono la ventana del navegador la capa mantiene su posición, pero cuando la ventana del navegador es menor de 972px aparece el scroll horizontal, lo que pasa que la capa que está centrada se sale de la capa que la contiene y eso hace que haya un espacio en blanco a la derecha. No entiendo que pasa ya que en otras ocasiones no me dió problemas, os dejo aquí el ejemplo abreviado .... lo he revisado, pero no doy encontrado la solución

Código HTML:

<div id="root">
              <div id="container">
                    <div class="content">
                      <h1>tempus</h1>
                        <p>Texto prueba ..............</p>
                    </div>  <!-- content end -->
                  
                    <br class="clearboth">
                    <footer>
                      <div>
                        <p>pié de página</p>
                      </div>
                    </footer>
              </div>  <!-- container end -->
        </div> <!-- root end -->
 

Código CSS:

#root { background:#f7f7f7;width:100% }
 
#container { background:#DDF4F3;width:100%; }
    
.content { width:972px; margin:0 auto;border:1px dotted #f12;  }    
    
    .content h1 { background:#3eb5d7; }
    
footer {background: #384355 ;padding:19px 24px;}
 footer div { width:972px; margin:0 auto; }
 

Gracias