CSS ORTALAMA Sıkıntısı

Merhaba arkadaşlar ben bir header divinin altında login divi yapıyorum.

header divinde background değerleri veriyorum.
daha sonra sitemin 960px olmasını ve ortalanmasını istiyorum. Ancak bunu body divine
margin 0 auto;
width: 960px olarak girdiğimde headerde girdiğim background değerlerini de ortalıyor ve sitenin kenarları bembeyaz kalıyor. Benim isteğim girdiğim background değerlerini görmeden sitedeki tüm yazıları 960px e ortalasın.

Bunu nasıl halledebilirim?

Hocam tasarımın bir görüntüsü ve kodları buraya ekleyin, yardımcı olayım.

CSS

.ustbar {
    width: auto;
    height: 36px;
    background: -moz-linear-gradient(#ECECEC, #BFBFBF); /* FF3.6+ */
    background: -webkit-linear-gradient(#ECECEC, #BFBFBF); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(#ECECEC, #BFBFBF); /* Opera11.10+ */
    background: -ms-linear-gradient(#ECECEC, #BFBFBF); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ECECEC', endColorstr='#BFBFBF',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(#ECECEC,#BFBFBF); /* W3C */
}

HTML

<div class="ustbar">
<div class="login">sdhhhhhhhhhhhhhhhh</div>
</div>

Benim istediğim siteyi 960px yapıp ortalamak ama ne yaparsam yapayım headerdeki bg kodları da nasibini görüp saçma sapan bir görüntü oluyor.
Siteyi genel divinin içine alıyorum ve,
margin 0 auto;
width: 960px; veriyorum ve son hali.


Bakın
Umarım anlatabilmişimdir .

.width { width: 960px; margin: 0px auto; }
.header {
    background: -moz-linear-gradient(#ECECEC, #BFBFBF);
    background: -webkit-linear-gradient(#ECECEC, #BFBFBF);
    background: -o-linear-gradient(#ECECEC, #BFBFBF); 
    background: -ms-linear-gradient(#ECECEC, #BFBFBF);
    background: linear-gradient(#ECECEC,#BFBFBF);
}
.header .login { line-height: 40px; }

<div class="header">
	<div class="width">
		<div class="login">sdhhhhhhhhhhhhhhhh</div>
	</div>
</div>

Çok mantıklı niye düşünemedim ben bunu