title: Navigation/Padding/Parent Divs
body: <p>I am trying to design a navigation menu that is centered that sits within a div that spans 100% width of the screen.  I have my navigation divs within a parent div called navigation, and that parent div is within a navigation container.  I felt this was necessary to have a centered navigation within this 100% width parent div.  </p>
  
  <p>The problem is that I am not having luck getting the parent div to expand with the appropriate padding I give to the navItem divs.  Sorry if this is kind of confusing, thanks for any advice offered.    </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;
              MC Machine Test
          &lt;/title&gt;
          &lt;link rel="stylesheet" href="main.css" type="text/css"&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="top"&gt;
      &lt;/div&gt;
      &lt;div class="navContainer"&gt;
          &lt;div class="navigation"&gt;
              &lt;div class="navItem"&gt;Home&lt;/div&gt;
              &lt;div class="navItem"&gt;Products&lt;/div&gt;
              &lt;div class="navItem"&gt;Facility&lt;/div&gt;
              &lt;div class="navItem"&gt;Photo Gallery&lt;/div&gt;
              &lt;div class="navItem"&gt;Request a Quote&lt;/div&gt;
              &lt;div class="navItem"&gt;Contact Us&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mainSection"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Here is the CSS.</strong></p>
  
  <pre><code>.navContainer
  {
      width:100%;
      background-color:#ffffff;
      color:#333333;
      border-bottom:solid 1px #333333;
  }
  
  .navigation
  {
      border:0px 1px 1px 0px solid #333333;
      width:680px;
      margin-left:auto;
      margin-right:auto;
  }
  .navItem
  {
      padding:20px;
      border-right:1px solid #cccccc;
      display:inline;
  }   
  </code></pre>