title: My navigation bar is vertical but won't go horizontal
body: <p>I've been having trouble making my navigation bar for some reason. I've tried looking at if anything here answers it or going online but have had no luck. Am I missing something or is there a conflict? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 
      html, body {
        margin: 0;
        padding: 0;
      }
      
      .container {
        max-width: 940px;
        margin: 0 auto;
        padding: 0 10px;
      }
      
      
      .jumbotron {
        background: url(../img/bg.jpg) no-repeat center center;
        background-size: cover;
        height: 800px;
      }
      
      .header {
        background-color: #333;
      }
      
      .nav {
        list-style-type: none;
        margin: 0;
        padding: 20px 0;
      }
      
      .nav li a {
        color: #fff;
        display: inline;
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        font-size: 12px;
        margin-right: 25px;
        text-transform: uppercase;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="header"&gt;
        &lt;div class="container"&gt;
          &lt;ul class="nav" role="navigation"&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Programming&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Writing&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Reading&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>