title: CSS design issues with separating icons from each other
body: <p>I'm trying to replicate a website, but there are some CSS issues I can't figure the answer to. For right now, what I would like to have my black navigation bar appear like the image below.and here is my code <a href="http://jsfiddle.net/FLWb5/1/" rel="nofollow noreferrer">http://jsfiddle.net/FLWb5/1/</a> I need to replicate this as part of a coding challenge, should I be building this on a css framework, what is the best way</p>
  
  <p><img src="https://i.stack.imgur.com/p8cc2.png" alt="website screenshot"></p>
  
  <p>This is a part of the code which points to the black nav bar icons: </p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div id="left_nav_bar"&gt;
      &lt;i class="ss-icon"&gt;home&lt;/i&gt;
      &lt;i class="ss-icon"&gt;time&lt;/i&gt;
      &lt;i class="ss-icon"&gt;user&lt;/i&gt;
      &lt;i class="ss-icon"&gt;question&lt;/i&gt;
      &lt;i class="ss-icon"&gt;play&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>