title: Centering Navbar
body: <p>I am trying to make my own navigation bar to get a better understanding of to create good navigation bars. The problem that I am having is centering my navbar. Now I know that using using margin-left: auto and margin-right: auto do usually do the trick and I have used that in the past but in this case no matter where I put these style elements my navbar doesn't seem to be centered. I have my body set to 100% and have provided my code below.
  *Note: I have tried a container for my navbar and centering it but it still doesn't seem to work.</p>
  
  <pre><code>#navbar ul {
  list-style-type:none;
  color: #000;
  padding: 0px;
  text-align: center;
  }
  li:hover {
  background-color: #cc2c32;
  padding: 16px .1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  }
  .subcategory {
  display: none;
  width: 1031px;
  height: 200px;
  background-color: #cc2c32;
  color: #03F;
  position: absolute;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-top: 15px;
  }
  li:hover .subcategory {
  display: block;
  }
  #navbar {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #dee8ff;
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: auto;
  margin-right: auto;
  }
  #navbar ul li {
  display: inline;
  }
  #navbar ul li a {
  padding: 0 1.5em;
  text-decoration: none;
  }
  ol {
  list-style-type: none;
  float: left;
  display: block;
  }
  .contentwrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 180px;
  width: 200px;
  background-color: inherit;
  position: relative;
  color: #2d4594;
  }
  a:link {
  color: #2d4594;
  text-decoration: none;
  }
  a:visited {
  color: #2d4594;
  text-decoration: none;
  }
  a:hover {
  color: #2d4594;
  text-decoration: none;
  }
  </code></pre>
  
  <p>And my HTML is </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="navbar"&gt;
    &lt;ul&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;
              &lt;div class="contentwrapper"&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;ol&gt;Hey&lt;/ol&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;LinkHere&lt;/a&gt;
          &lt;div class="subcategory"&gt;&lt;/div&gt;
      &lt;/li&gt; 
  &lt;/ul&gt; 
  &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>