divs og bredde

Jeg har en side, jeg gerne vil have skygge omkring i princippet uden at pille ved den eksisterende side..

FORKLARING
Jeg har en skygge i om selve siden og en i bunden. (page_shadow og footer_shadow). Bredde på billederne passer præcis til bredderne i css....

Det går fint indtil div med selve siden indsættes (page), da rykker skyggerne en anelse fra hinanden (i venstre side).

Det ser ud som om det ene skyggebillede bliver en anelse trykket.


SPØRGSMÅLET:
Er der nogen, der har en forklaring på hvorfor det  sker?


ET PAR GÆT:
Det kunne godt hænge sammen med manglende forståelse af hvordan width beregnes...
Det kan også være jeg ikke holder mig til "best pratice".



Siden, med de væsentligste dele:
    <div class="page_shadow">
        <div class="page">
        </div>
    </div>
    <div class="footer_shadow">
    </div>

CSS:
.page_shadow
{
    width: 976px;
    margin: 0px auto 0px auto;
    background-image: url('Images/shadow.png');
    background-repeat: repeat;
}

.footer_shadow
{
    width: 976px;
    min-height: 50px;
    margin: 0px auto 0px auto;
    background-image: url('Images/shadow_footer.png');
    background-repeat: no-repeat;
}

.page
{
    width: 960px;
    background-color: #fff;
    margin: 0px auto 0px auto;
    /*border: 1px solid #496077;*/
}