title: Display:inline for creating a horizontal navigation bar not working
body: <p>I am relatively new to <code>CSS</code> and I'm having trouble getting my navigation bar aligned horizontally. I tried the display:inline; function with no success. When using the float:left function, I get all the li aligned horizontally, but in this case, I cannot center it on the page. Also the margin:0 auto; does not do it in this case.</p>
  
  <p>The navigation bar is created via an ul inside a DIV, which is also contained inside a "wrapper div".</p>
  
  <p>Is the problem linked to the various ID selectors used and the nesting of the various elements? </p>
  
  <p>Please find the jsfiddle below for visualisation:</p>
  
  <h2><a href="http://jsfiddle.net/Kingleoric/om4692f3/" rel="nofollow">JsFiddle</a></h2>
  
  <p>Any help would be greatly appreciated :)</p>
  
  <p>Thanks, Danny</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="navigation"&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="gallery.html" class="dropdown"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
          &lt;li class="sublinks"&gt; 
               &lt;a href="#"&gt;PORTRAITURE&lt;/a&gt;
               &lt;a href="#"&gt;NATURE&lt;/a&gt;
           &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="blog.html"&gt;BLOG&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="ModelReleaseForm.pdf" target="_blank"&gt;MODEL RELEASE&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  ul {
  list-style:none;
  margin:0px 5px;}
  
  ul li {
  display:inline;}
  
  ul li a {
  color:#ffffff;
  background:#09F;
  padding:0px 0px;
  margin:0 auto;
  font-weight:bold;
  font-size:14px;
  font-family:'sans open', Arial, Helvetica, sans-serif;
  text-decoration:none;
  display:block;
  width:auto;
  height:40px;
  line-height:15px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #560E00;}
  
  ul li a:hover {
  color:#cccccc;
  background:#06F;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:auto;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #000000;}
  
  ul li.sublinks a {
  color:#000000;
  background:#f6f6f6;
  border-bottom:1px solid #cccccc;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  margin-top:2px;}
  
  ul li.sublinks a:hover {
  color:#000000;
  background:#FFEFC6;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;}
  
  ul li.sublinks {
  display:none;}
  </code></pre>