HTML & CSS A left margin or padding that I cannot remove

[Anthony Powell]

<html lang="en">
    <head>
        <link href="pre%20demo.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <main>
            <article>
                <pre>
                    <code>&lt;!DOCTYPE html&gt;</code>
                    <code>&lt;html lang="en"&gt;</code>
                    <code>    &lt;head&gt;</code>
                    <code>    &lt;/head&gt;</code>
                    <code>    &lt;body&gt;</code>
                    <code>        &lt;header&gt;</code>
                    <code>        &lt;/header&gt;</code>
                    <code>        &lt;main&gt;</code>
                    <code>            &lt;article&gt;</code>
                    <code>                &lt;section&gt;</code>
                    <code>                    &lt;aside&gt;</code>
                    <code>                    &lt;/aside&gt;</code>
                    <code>                &lt;/section&gt;</code>
                    <code>                &lt;aside&gt;</code>
                    <code>                &lt;/aside&gt;</code>
                    <code>            &lt;/article&gt;</code>
                    <code>        &lt;/main&gt;</code>
                    <code>        &lt;footer&gt;</code>
                    <code>        &lt;/footer&gt;</code>
                    <code>    &lt;/body&gt;</code>
                    <code>&lt;/html&gt;</code>
                </pre>
            </article>
        </main>
    </body>
</html>

The above html code is to render a line numbered copy of an html skeleton code.
I am using the CSS code shown below.
Everything works except that a 60 pixel margin appears to the left of the code which I cannot remove. The margin does not appear to beling to eithe the <pre> or <code> elements. Please check the attached image.
Any help would be gratefully received.
Anthony Powell

pre{
    counter-reset: linenum;
    background-color: #444;
}
code{
    color: yellow;
}

code::before{
    counter-increment: linenum;
    content: counter(linenum) "  ";
    color: darkorange;
    background-color: #448;
}

 

[Johna]

Add float: left; to your code {}, so that it's like this:

code{
    color: yellow;
    float: left;
}