Anthony Powell
New Coder
HTML:
<html lang="en">
<head>
<link href="pre%20demo.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<article>
<pre>
<code><!DOCTYPE html></code>
<code><html lang="en"></code>
<code> <head></code>
<code> </head></code>
<code> <body></code>
<code> <header></code>
<code> </header></code>
<code> <main></code>
<code> <article></code>
<code> <section></code>
<code> <aside></code>
<code> </aside></code>
<code> </section></code>
<code> <aside></code>
<code> </aside></code>
<code> </article></code>
<code> </main></code>
<code> <footer></code>
<code> </footer></code>
<code> </body></code>
<code></html></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
CSS:
pre{
counter-reset: linenum;
background-color: #444;
}
code{
color: yellow;
}
code::before{
counter-increment: linenum;
content: counter(linenum) " ";
color: darkorange;
background-color: #448;
}