title: Line numbers misaligned using Prism code highlighter
body: <p>I'm using the <a href="http://prismjs.com/" rel="nofollow noreferrer">prism</a> library to highlight some HTML, CSS and JavaScript code. It does an amazing job for the most part, except when it comes to line numbers.</p>
  
  <p>They look like: </p>
  
  <p><a href="https://i.stack.imgur.com/huhWJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/huhWJ.png" alt="Misaligned line numbers"></a></p>
  
  <p>As you can see, they are misaligned.
  How can I fix this?
  My current code looks like:</p>
  
  <pre><code>&lt;div id="html-display" class="display code-display"&gt;
          &lt;button class="explain-code"&gt;Explain this code&lt;/button&gt;
          &lt;span class="current-code"&gt;&lt;pre class="line-numbers"&gt;&lt;code class="language-markup"&gt;
  &amp;lt;!DOCTYPE html&amp;gt;
  &amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
      &amp;lt;title&amp;gt;a&amp;lt;/title&amp;gt;
      &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;
      &amp;lt;meta name=&amp;quot;author&amp;quot; content=&amp;quot;A A&amp;quot;&amp;gt;
      &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;design.css&amp;quot;&amp;gt;
      &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;jquery.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
      &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;script.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
      &amp;lt;h1&amp;gt;Test&amp;lt;/h1&amp;gt;
  &amp;lt;/body&amp;gt;
  &amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>