title: multiple UL's not same level
body: <p>I've got a problem with the position of two UL's. I want the two UL's to be on the same level. As you can see in the Picture below, the first UL list is way down, while the second is at the top. I was able to recreate this on jsfiddle.</p>
  
  <p>Link: <a href="http://jsfiddle.net/5krJU/" rel="nofollow noreferrer">http://jsfiddle.net/5krJU/</a></p>
  
  <p>I was able to figure out that the problem is because the second list has more li than the first, but i wasn't able to fix it.</p>
  
  <p>My current css looks like this:</p>
  
  <pre><code>#container {text-align: center; display:block;}
  #container &gt; ul { color:#776; display:inline-block; width:360px; list-style-type: none;}
  </code></pre>
  
  <p>and my html like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
   &lt;ul&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's a picture of it:
  <img src="https://i.stack.imgur.com/MmDe7.png" alt="my problem"></p>
  
  <h2>Update</h2>
  
  <p>i found out the answer.</p>
  
  <p>Solution would be adding 'vertical-align: top;' to the ul's.</p>
  
  <p>Please close this question.</p>
  
  <p>Sorry for the inconvience.</p>