title: how to center a navigation menu
body: <p><strong>CSS</strong></p>
  
  <pre><code>body {
         background-color:#CCC
  }
  
  h1 {
  
      text-align: left;
      border-bottom:2px solid #03F margin-bottom:50px;
      border-bottom: 5px;
      border-bottom-color: #000;
      border-bottom-style: double;
      border-bottom-width: thick;
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 72px;
      font-style: normal;
      font-weight: bold;
      -moz-box-align: center;
  }
  
  .div1 {
      margin-width: 0px auto;
      -moz-box-align: center;
      -webkit-box-align: center;
      margin: center;
      margin-left: 150px;
      margin-right: 100px;
  }
  
  .div1 ul li {
      margin:auto;
      float: left;
      list-style-type: none;
  }
  
  .div1 ul li a {
      margin:auto;
      color: #FFF;
      text-decoration: none;
      background-color: #333;
      display: block;
      height: 50px;
      width: 220px;
      text-align: center;
      line-height: 50px;
      border-left-width: thin;
      border-left-style: solid;
      border-left-color: #CCC;
  }
  
  .noBorder {
      border-left-style: none !important;
  }
  
  .div1 ul li a:hover {
      background-color: #666;
  }
  
  .leftEdge {
      border-radius: 8px 0px 0px 8px;
  }
  
  .rightEdge {
      border-radius: 0px 8px 8px 0px;
  }
  
  .divide {
      padding: 10px 20px;
      background:SkyBlue;
      border: 1px solid #E5E5E5;
      -moz-box-shadow: rgba(200, 200, 200, 0.7) 0 4px 10px -1px;
      -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0 4px 10px -1px;
      box-shadow: rgba(200, 200, 200, 0.7) 0 4px 10px -1px;
      margin-bottom: 20px;
      margin-left:100px;
      margin-right:250px;
      font-family:"Trebuchet MS", Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 16px;
      line-height: 100%;
      color: #000;
  }
  </code></pre>
  
  <p>HTML
      </p>
  
  <pre><code>&lt;h1&gt;hEAD&lt;/h1&gt;
  
  &lt;div class="div1"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" class="noBorder leftEdge"&gt;Item 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="rightEdge"&gt;Item 4&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div class="divide" style="font-weight: normal !important;"&gt;Hey friends&lt;/div&gt;
  </code></pre>
  
  <p>Please can anyone help me in this:
  i am wanting to make my navigation bar in the center of the webpage. 
  here is my html AND CSS document:<br>
  <a href="http://jsfiddle.net/dQbqP/" rel="nofollow">http://jsfiddle.net/dQbqP/</a><br>
  Please help me i really need the solution to it.<br>ASAP</p>