title: Why is my menu DIV overflowing its parent?
body: <p>The menu div is overflowing the parent.</p>
  
  <p>
      
           <p>&quot;Science is but a perversion of itself...&quot;</p>
      </p>
  
  <pre><code>&lt;div id="header"&gt;
       &lt;h1&gt;TITLE&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="navwrap"&gt;
  &lt;ul class="nav"&gt;
      &lt;li&gt;&lt;a id="homenav" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="linksnav" href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="contactnav" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>/*
  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
  */
  </code></pre>