Мне кажется, так будет правильней:
Код HTML/CSS<body>
<header class="header">
<div class="top_navigation"> <!-- Зачем див с классом top_navigation, если дальше есть класс navigation ? -->
<nav class="navigation">
<li><a class="active" href="/">Home</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">About us</a></li>
<li><a href="/">Chat</a></li>
<li><a href="/">Forum</a></li>
</nav>
</div>
<div class="logobg">
<div class="logo_inner">
<div class="logo"><a href="/"></a></div>
</div>
</div>
</header>
</body>
html, body, div {
margin: 0;
padding: 0;
}
body {
min-width: 100%;
min-height: 100%;
}
.top_navigation {
height: 35px;
background: #34160c;
display: block;
}
nav {
margin: 0 auto;
width: 600px;
}
nav > li {
font: 13px Trebuchet MS;
float: left;
margin: 0 5px;
line-height: 35px;
list-style: none;
font-weight: bold;
text-transform: uppercase;
}
nav > li > a {
color: #fff;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
}
.navigation > li > a:hover, .navigation > li > a.active {
background: #ff6600;
}
.logobg {
width: 600px;
height: 150px;
background: #fff8f0;
background: url(../img/logobg.jpg) no-repeat;
margin: 0 auto;
}
.logo {
width: 378px;
height: 128px;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
}
Я показал основные принципы, дальше уже думайте сами, полностью вылизывать код не стал. Ваша ошибка: вы делаете много лишних(topnav_inner, logo_inner) оберток для дивов, и сами в них путаетесь. Естественно, "родители" резиновые, а вложенные блоки фиксированной ширины, отсюда и будет проблема как на скриншоте, после того, как окно браузера уменьшить до 778px по ширине.
z-index:9999 у вас там вообще лишний в css, он используется только для position: fixed, relative, absolute
