title: Navbar is not displaying inline
body: <p>My Navbar is not displaying inline.
  When change code: <code>.nav li a {...}</code> to <code>.nav li{...}</code> it is in line, but all the css functions disappear from the class=nav in HTML.
  I tried to add <code>ul.nav{display: inline-block;}</code> but it does nothing.</p>
  
  <p>I hope I explained it well, I was trying to figure it out since yesterday...</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: 5px;
  }
  
  .header {
    background-color: #333;
  }
  
  .nav {
    list-style-type: none;
    margin: 0;
    padding: 20px 0;
    letter-spacing: 1.6px;
  }
  
  .nav li a {
    display: inline;
    text-decoration: none;
    transition: 0.4s;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin-right: 25px;
    text-transform: uppercase;
  }
  
  .nav li a:hover {
    background-color: #ffffff;
    color: #333;
    font-weight: 900;
    padding: 24px 10px;
    font-size: 12px;
    cursor: pointer;
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet"&gt;
      &lt;link href="stylesheet.css" type="text/css" rel="stylesheet"&gt;
      &lt;script type='text/javascript' src='script.js'&gt;&lt;/script&gt;
      &lt;script src="jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Smart-Home&lt;/title&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="header"&gt;
      &lt;div class="container"&gt;
        &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href ="indexKontakt.html"&gt; O firmie &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="indexKontakt.html"&gt; Produkty &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="indexKontakt.html"&gt; Nasi partnerzy &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="indexKontakt.html"&gt; Kontakt &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>