Problemas al hacer zoom

[opzina]

Cuando hago zoom in/out

el header queda fijo a la izquierda de la pantalla

y el container y footer se mueven en bloque como yo realmente quiero.


les dejos la css y el html:

Código HTML:

#header {
	height: 337px;
	width: 100%;
	margin-top: 20px;
}

.head {margin-top: 70px; height: 36px; display: block;}

#nav {
	width: 24%;
	background: #06a5c2 url("img/nav_degradee.png") top right no-repeat;
}
	

#logo {
	width: 10%;
	padding-left: 2.4%;
}

#logo h1 a {
	text-indent: -9999px;
	display: block;
	background: url("img/logo.png") center no-repeat;
	width: 143px;
	height: 29px;
	position: relative;
	top: 3px;
}

#navbar {
	width: 63.6%;
	background: #06a5c2 url("img/navbar_degradee.png") top left no-repeat;
}

#navbar ul {
	margin: 6px 0;
	padding: 0;
	list-style: disc; 
	color: #FFF;	
}

#navbar li {
	float: left;
	margin: 2px 15px 0 15px;
	padding: 2px;
	list-style-image: url("img/vineta.gif");
}

.active {list-style: none; }

Código HTML:

<div id="header"> 
 
		<div id="nav" class="head left"></div>
		<div id="logo" class="head left"><h1><a class="png_bg" href="http://vgdesign.com.ar/">LOCALHOST</a></h1></div>
		<div id="navbar" class="head left">
			<ul>
				<li class="active">Inicio</li>
				<li>Info</li>
				<li>Portfolio</li>
				<li>Contacto</li>
			</ul>
		</div>
		
</div> 

[opzina]

o sea si yo a

Código HTML:

#header {
	height: 337px;
	width: 100%;
	margin-top: 20px;
}

lo pongo así

Código HTML:

#header {
	height: 337px;
	width: 1920px; /* Cambio esto*/
	margin-top: 20px;
}

se me soluciona en parte el problema: es decir al hacer zoom se mueve todo en bloque.

PERO los degradados que estan en el header tienen que estar al 100% y con esta solcuion que plante quedan con limite de 1920px.