title: How do I make sure every glyph has the same width?
body: <p>I've noticed that even at the same font size, there is not a standard width. How can I use these in front of a list of items so the words don't appear jagged?</p>
  
  <p>Screenshot of issue: </p>
  
  <p><img src="https://i.stack.imgur.com/jlJsN.png" alt=""></p>
  
  <p>This is the code:
  </p>
  
  <pre><code>&lt;ul id="myTab"&gt;
      &lt;li class="active"&gt;&lt;a href="#home"&gt;&lt;i class="icon-tasks"&gt;&lt;/i&gt; Proposal&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#video"&gt;&lt;i class="icon-film"&gt;&lt;/i&gt; Videos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#asset"&gt;&lt;i class="icon-paper-clip"&gt;&lt;/i&gt; Assets&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#payment"&gt;&lt;i class="icon-credit-card"&gt;&lt;/i&gt; Payment&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#history"&gt;&lt;i class="icon-calendar empty"&gt;&lt;/i&gt; History&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>