Mettre la bannière sur toute la largeur de la page

Bonsoir tout le monde,
j'espère que quelqu'un pourra m'aider, je ne suis pas excellent coté programmation , j'ai toujours appris sur internet petit à petit ;)

j'ai une bannière en haut au milieu avec ce code css, la bannière est au milieu je souhaite qu'elle soit sur toute la largeur de la page et s'adapte au différents tailles d'écrans, qu'est ce qu'il faut changer svp, merci beaucoup pour votre aide
(j'ai deux bannière différentes une pour la page d'accueil 980x273 et une commune pour les pages du site 980x164 , ces deux là je souhaite qu'elles soient sur toute la largeur de la page)

.header {
    background: transparent url("../img/header-bg.png") no-repeat scroll center top;
    height: 166px;
    margin: 10px auto 0px;
    width: auto;
}
.home .header .main {
    position: relative;
    height: 274px;
    margin: 0px auto;
    padding-top: 0px;
    z-index: 99;
    background: transparent none repeat scroll 0% 0%;
}
.header .main {
    background: transparent url("../img/header-main-bg.jpg") no-repeat scroll center top;
    width: 980px;
    height: 170px;
    margin: 0px auto;
    position: relative;
    z-index: 3;
}