Salve a tutti,

è da molto tempo che riscontro questo errore e non riesco a trovare una soluzione.
In pratica ho due DIV messi uno sotto l'altro, uno con uno sfondo che si ripete per tutta la pagina in larghezza (100%) e l'altro che sta sotto quest'ultimo centrato con margin:auto...
Sarebbero un header e un container


Per capirci meglio :



il primo div in rosso ha questo codice css :
codice:
#header
{

width:100%;
height:262px;
background-image:url(sfondoripeti.png); // lo sfondo ha una larghezza di 1px
background-repeat:repeat-x;
}
mentre il secondo div trasparente ha questo codice css:
codice:
#container
{
margin:auto;
width:980px;
height:600px;
}
Ora qual'è il problema? Il problema è che quando io vado a ridimensionare la finestra del browser(con larghezza minore del container) , appare una scrollbar orizzontale e andando a destra vedo il div trasparente tagliato per un alcuni px..

Ho notato che l'errore lo da quando non imposto un colore di sfondo nel container o quando metto la larghezza in px (se metto in % funziona)...

Nell'html sono ordinati così :

codice:
<div id="header">
</div>

<div id="container">
</div>
Spero di poter essere aiuto e finalmente riuscire a risolvere questo fastidioso problema che specialmente negli dispositivi mobile è molto evidente.