title: UL display: block
body: <p>I am not sure if this is the right way to do this but I am trying to align a number of ULs beside each other and should drop the third UL when the screen size is smaller. I just need help with the CSS because for some reason, they keep stacking on top of one another even though I already changed the width to 50%. I already created the '@media'.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;Content 1&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  &lt;li&gt;Content 2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  &lt;li&gt;Content 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul { 
   display: block;
   width: 100%;
   float:left;
  }
  
  @media (max-width: 767px){
     ul { 
      width: 50%;
     }
  }
  </code></pre>