title: Centering My Navbar Links
body: <p>So I've been desperately trying out every method I can find online for centering my nav bar links. </p>
  
  <p>However whatever I do, they seem to either line horizontally (like I want) but to the left of the page (not what I want), or they line vertically (not what I want) but to the center of the page (what I want). </p>
  
  <p>It seems no matter what margin, float, display settings I use in the CSS it never renders the navbar links in a horizontal line, in the center of the page. </p>
  
  <p>My code is: </p>
  
  <p>HTML:</p>
  
  <p> </p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="maincontent"&gt;
          &lt;div class="navbar"&gt;
              &lt;div&gt;
                  &lt;h1&gt;Tom Love&lt;/h1&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt; &lt;a href="about.html"&gt;Home&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="about.html"&gt;About&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="about.html"&gt;Portfolio&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="about.html"&gt;Contact&lt;/a&gt; &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p> </p>
  
  <p>CSS:</p>
  
  <pre><code>h1 {font-family:'Roboto Slab',sans-serif;
      font-size:250%;
      font-weight:300;
      color:black;
      text-align:center;
      line-height:32px;
  
  } 
  
  h1 span {font-size:60%;
      font-family:'Roboto Slab',sans-serif;
  } 
  
  .navbar {
  clear:both;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:center;
  width:100%;
  }
  
  .navbar div {
      float:center;
      position:relative;
  }
  
  .navbar ul {
      list-style-type: none;
      text-align:center;
      padding:10px;
      margin:auto;
  }
  
  .navbar ul li {
      padding:10px;
      float:center;
  }
  
  .navbar ul li a {
      text-decoration:none;
      color:black;
      margin:10px;
      display:inline;
      width:80px;
      height:30px;
  }
  
  .navbar ul li a:hover {
      text-decoration:none;
      color:white;
      background:black;
  } 
  </code></pre>
  
  <p>Apologies for any glaring mistakes in the code, it's my first attempt at building something outside of codeacademy and YouTube tuts. </p>
  
  <p>Thanks in advance :)</p>