Why is my menu DIV overflowing its parent?

Question

The menu div is overflowing the parent.

"Science is but a perversion of itself..."

<div id="header">
     <h1>TITLE</h1>
</div>
<div id="navwrap">
<ul class="nav">
    <li><a id="homenav" href="index.html">Home</a></li>
    <li><a id="linksnav" href="#">Links</a></li>
    <li><a id="contactnav" href="#">Contact</a></li>
<div class="clear"></div>
</ul>
</div>

/*
NAV BEGIN
*/

#navwrap {
    width: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
    float:left;
    margin:0;
    font-family: "David Sans", "Trebuchet MS", Verdana, Sans-Serif;
    font-size:8px;
    background:#4a4a4a;
    color: #959595;
    border: 2px solid #202c28;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top: 0;
    clear: both; 
}

.nav {
    float:left;
    /* width:100%; */
    /* margin:0; */

}

.nav li {
    font-size: inherit;
    list-style:none;
    display:inline;
    /*padding:10px 2px;*/
    color: inherit;
}

.nav li a {
    margin:0px 0px;
    padding:7px;
    color: inherit;
    text-decoration:none;
    font-weight: bold;
}

.nav li a:hover {
    font-size: inherit;
    list-style:none;
    display:inline;
    background: #9ead72;
    color: #282828;
}

/*
NAV END
*/

/*
HEADWRAP BEGIN
*/
#headwrap {
    width: 880px;
    clear: both;
}
/*
HEADWRAP END
*/
/*
WATERMARK BEGIN
*/
#watermark {
    height:20px;
    margin:0px;
    padding:5px 20px;
    color:#787878;
    font-family: "David Sans", "Trebuchet MS", Verdana, Sans-Serif;
    font-size:8px;
    text-align:right;
    background:#383838 /*url(../img/tlcorner.gif) top left no-repeat */;
    border: 2px solid #202c28;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom: 0;
}

/*
WATERMARK END
*/

/*
HEADER BEGIN
*/

#header {
    height:80px;
    margin:0;
    padding:30px 20px;
    background:#3f3f3f  url(../img/headerbg.gif) bottom right no-repeat;
    color:#a8a5a5;
    font-size:95%;
    text-align:left;
    clear:both;
    border-left:2px solid #202c28;
    border-right:2px solid #202c28;
}


#header h1{
    margin:0;
    padding:0 20px;
    font-size:200%;
}

/*
HEADER END
*/

Answer 1

#navwrap{
    width:876px;
}

That's a quick fix.

Answer 2

This is happening because in the new W3C box model, padding, border, and margin are counted outside the size of the content area. In your case the content area has a width of 880px. The menu bar inherits this width, but it has a 2px border on it's left and right, which is adding to the 4px overflow you're seeing.

To gain a super insight into the topic, you can checkout w3 docs on the box model at or this ADD friendly explanation that I would use.

It seems CSS3 has a good solution to this problem. You can change the box model to include border, and padding into the content area. Add the following declaration to your navwrap element:

#navwrap {
    box-sizing: border-box;
}

CSS3 is not yet formalized, so everyone has their own implementation. For mozilla it's called moz-box-sizing.

Quirksmode published a nice article on the topic that you might find helpful.