Issue with part of menu bar disappearing on reseize - html

Question

I have a website I'm designing and I ran across a problem with resizing.
Here is my website when maximized in Chromium 28.0:
and you can see the grey menu bar reaches all the way across.
However, when I go to resize the window:
The code for that div (#header) is:
#header {
background-color: #dcdcdc;
border-bottom: 1px solid #e6e6e6;
padding: 27px 0;
}
so there is no set width.
What's going on?
EDIT: 11/1/2013
Here's my HTML for the header:
<div id="header">
<div>
<div class="logo">
Thumbnails
</div>
<ul id="navigation">
<li class="active">
Home
</li>
<li>
Features
</li>
<li>
News
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
EDIT: 11/1/2013 Firefox Screenshot:
I added a screenshot from Firefox and the problem affects the footer as well (happens in Chromium as well)

Answer 1

After simplifying your html + css, I came up with a solution that appears to work as intended. I believe the problem was the way you had setup the padding + margin.
The HTML:
<div class="page-container">
<header class="top-bar">
<div class="inner">
<h2 class="logo">Logo</h2>
<ul class="main-nav">
<li class="active">Home</li>
<li>Features</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="main-content"></section>
<footer class="bottom-bar">
<div class="inner">
<span class="copyright">Copyright info here.</span>
<span class="contact">Contact info here.</span>
</div>
</footer>
</div>
</body>
The CSS:
body {
margin: 0;
padding: 0;
}
.page-container {
margin: 0;
padding: 0;
}
/* ===============================================
/* ====== HEADER + NAVIGATION STYLES
/* ============================================ */
.top-bar {
background: #EEE;
height: 100px;
text-align: center;
}
.inner {
background: #DDD;
display: block;
height: 100px;
margin: 0 auto;
width: 920px;
}
.logo {
background: #CCC;
display: block;
float: left;
font-size: 16px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 35px 0;
width: 120px;
}
.main-nav {
display: block;
float: left;
height: 30px;
line-height: 30px;
margin: 0;
padding: 35px 0;
}
.main-nav li {
display: block;
float: left;
width: 160px;
}
.main-nav li a {
color: #999;
font-size: 14px;
text-decoration: none;
}
.main-nav li.active a,
.main-nav li a:hover {
color: #F99600;
}
/* ===============================================
/* ====== MAIN CONTENT PLACEHOLDER STYLES
/* ============================================ */
.main-content {
background: #F6F6F6;
height: auto;
margin: 0 auto;
min-height: 500px;
width: 920px;
}
/* ===============================================
/* ====== FOOTER ELEMENT STYLES
/* ============================================ */
.bottom-bar {
background: #EEE;
height: 100px;
}
.bottom-bar .copyright,
.bottom-bar .contact {
display: block;
font-size: 12px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 35px;
}
.copyright { float: left; }
.contact { float: right; }
You can check out the working code here: http://jsfiddle.net/onestepcreative/X8QbD/