title: Keep the list menu on one line
body: <p>I'm trying to make a menu looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/jXaFH.jpg" alt="Example"></p>
  
  <p>but for some reason my menu looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/c4A1Y.jpg" alt="problem"></p>
  
  <p>As you can see, I am trying to keep the 2nd row of menu options in one line but whatever I try to do it doesn't seem to do that. </p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div class="wrap"&gt;
          &lt;div id="logo"&gt;
              &lt;a href="index.html"&gt;&lt;img src="img/header/seal.jpg" alt="" style="width:106px;height:67px;"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="nav_box"&gt;
              &lt;ul id="mini_nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Voorwaarden&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Privacy&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul id="nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Olivetti&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Producten&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html,body {
      height:100%;
      width:100%;
  }
  
  .wrap {
      margin: 0 auto;
      width: 1024px;
  }
  
  /* - 2.5 - MENU
  ------------------------------------------ */
  
  #logo {
      margin-left:45px;
      margin-top:18px;
      float:left;
  }
  
  #header {
      top:0; left:0;
      width:100%; height:112px;
      position:absolute;
      z-index:100;
  }
  
  #nav_box {
      float:right;
      margin-right:50px;
      margin-top:25px;
  }
  
  #mini_nav li {
      font-family:'Myriad Pro';
      float:right;
      text-transform:uppercase;
      color: #bbbbbb;
      font-size: 14px;
      margin-left:22px;
  }
  
  #mini_nav li a{
      font-family:'Myriad Pro';
      color: #bbbbbb;
      font-size: 14px;
  }
  
  #nav li {
      font-family:'Oxygen';
      float:right;
      text-transform:uppercase;
      font-weight:bold;
      color: #bbbbbb;
      font-size: 17px;
      margin-left:22px;
      margin-top:20px;
  }
  
  #nav li a{
      font-family:'Oxygen';
      color: #bbbbbb;
      font-size: 17px;
  }
  </code></pre>
  
  <p>I am kind of lost on how to tackle, maybe you guys could help me out on this?
  I have tried using the position property and the float property but it doesn't seem to work. I'm probably thinking to hard on this.</p>