javascript - Line numbers misaligned using Prism code highlighter

Question

I'm using the prism 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.

They look like:

As you can see, they are misaligned. How can I fix this? My current code looks like:

<div id="html-display" class="display code-display">
        <button class="explain-code">Explain this code</button>
        <span class="current-code"><pre class="line-numbers"><code class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;a&lt;/title&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;A A&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;design.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Test&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></span>
</div>