title: align image next to text
body: <p>I am trying to display image and text like in this image <a href="http://i.imgur.com/qReaDlP.jpg" rel="nofollow">http://i.imgur.com/qReaDlP.jpg</a>. But I am facing 2 issues on my <a href="http://jsfiddle.net/rwcbdk38/1/" rel="nofollow">fiddle</a></p>
  
  <ol>
  <li>background image doesn't show up.</li>
  <li>Contents stack up even when there is space is right. I believe its some extra padding/margin I have in code but not sure where.</li>
  </ol>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;section class="freedom_carousel"&gt;
    &lt;ul class="two-col"&gt;
      &lt;li class="pen"&gt; 
        &lt;span class="icon-text"&gt; &lt;em&gt;THis is &lt;/em&gt; text text text&lt;/span&gt; 
      &lt;/li&gt;
      &lt;li class="phone"&gt; 
        &lt;span class="icon-text"&gt; &lt;em&gt;THis is &lt;/em&gt; text text text&lt;/span&gt; 
      &lt;/li&gt;
      &lt;li class="arrow"&gt; 
        &lt;span class="icon-text"&gt; &lt;em&gt;THis is &lt;/em&gt; text text text&lt;/span&gt; 
      &lt;/li&gt;
      &lt;li class="download"&gt; 
        &lt;span class="icon-text"&gt; &lt;em&gt;THis is &lt;/em&gt; text text text text&lt;/span&gt;   
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>