title: Display two ul (display: inline) in the same row
body: <p>I am trying to build a site (just to learn, is not an actual website) and at the top there's links to different sections of the page. The HTML goes as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="nav"&gt;
        &lt;div class="container"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Airbnb logo&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Browse&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="header"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;Find a place to stay.&lt;/h1&gt;
          &lt;p&gt;Rent from people in over 34,000 cities and 192 countries.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  
      &lt;div class="learn-more"&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;h3&gt;Travel&lt;/h3&gt;
              &lt;p&gt;From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;See how to travel on Airbnb&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;Host&lt;/h3&gt;
              &lt;p&gt;Renting out your unused space could pay your bills or fund your next vacation.&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Learn more about hosting&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h3&gt;Trust and Safety&lt;/h3&gt;
              &lt;p&gt;From Verified ID to our worldwide customer support team, we've got your back.&lt;/p&gt;
              &lt;p&gt;&lt;a href="#"&gt;Learn about trust at Airbnb&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now I am trying to style the page, but I want all the elements of the navbar in the same line. </p>
  
  <p>So far I have: </p>
  
  <pre><code>.nav a {
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
  }
  
  .nav li {
      display: inline;
  }
  
  .header {
    background-image:url('http://bit.ly/1KIFZoI');
    background-size: cover;
    height: 300px;
  }
  
  .header h1 {
    color: #fff;
    font-size: 48px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
  }
  
  .header p {
    font-size: 20px;
    color: #fff;
  }
  </code></pre>
  
  <p>However, the display: inline; still leaves my navbar in two lines. I want them all in the same line if possible not putting all the elements in the same list (same ul)</p>
  
  <p>Thanks! </p>