Zepsuty wygląd przez <meta name="viewport" content="width=device-width">

[pavo]

Witam,
Wkleiłem komendę <meta name="viewport" content="width=device-width"> do headera po to by w pliku z css zastosować parę trików z @media screen and (max-width: XXXpx).
I wszystko działa pięknie, ale tło menu w wersji mobilnej jest wypełnione tylko w 30% pomimo, że odpowiadający za to kod css nie był przeze mnie ruszany (ani modyfikowany komendą @media screen). Więc nie wiem dlaczego <meta name="viewport" content="width=device-width"> to psuje.

Niewypełnione w pełni tło menu widać na SS:

 

Oraz CSS z którego korzystam:
 

#header{background:#222222;border-bottom:1px solid #363A43;height:56px;margin:0 auto;z-index: 10;position: relative;width:100%;}

#header .wrapper{margin:0 auto;width:980px;}

#header .wrapper #logo{float:left;margin:7px 0 0 0px;width:170px;}

#header .wrapper .headbar-items{float:left; padding-top: 2px; padding-left: 50px;}

#header .wrapper .headbar-items ul {

    overflow: hidden;

    list-style-type: none;

    font-size: 13px;

    padding-left: 0px;

width: 100%!important;

}

 

 

W wersji komputerowej wszystko działa OK:

 

 

Edit: To samo tyczy się paska footer.
Ktoś ma jakieś pomysły?

 

[pyzdera]

Nie zaszkodziło by wrzucić html odpowiedzialny za problematyczny pasek, ale zaryzykuję - overflow: hidden; dla elementu któremu tło ucieka...