Numbers misaligned with code in a <pre><code>

HTML-CSS
1

HTML code so far

<div class="code-container">
      <div class="line-numbers">
        <span>1</span>
        <span>2</span>
        <span>3</span>
      </div>
      <pre>
    <code>
&lt;div id="example"&gt;
  &lt;p&gt;This is example text&lt;/p&gt;
&lt;/div&gt;
    </code>
  </pre>
    </div>

    <p>JS</p>

    <div class="code-container">
      <div class="line-numbers">
        <span>1</span>
      </div>
      <pre>
    <code>
const ExampleVar = document.getElementById("example");
    </code>
  </pre>
    </div>

and my CSS:

.code-container {
  display: flex;
  background-color: #f4f4f4;
  border-radius: 5px;
  overflow-x: auto;
  font-family: monospace;
  color: red;
}

.line-numbers {
  padding: 10px 5px;
  text-align: right;
  color: #888;
  user-select: none; 
  background-color: #eaeaea; 
}

.line-numbers span {
  display: block;
  line-height: 1.5em; 
}

pre {
  margin: 0;
  padding: 10px;
  line-height: 1.5em;
  overflow-x: auto;
}

code {
  display: block;
  white-space: pre;
}

and this is the product:

Screen Shot 2024-11-29 at 5.13.40 PM
Screen Shot 2024-11-29 at 5.13.40 PM1178×848 22.1 KB

Notice how the numbers are unaligned? How do I fix this? thanks!

2

What do you expect by nesting the code TAG within the pre TAG.

3

Can you please elaborate

4

Please explain What is the final result you expect by nesting the code TAG within the pre TAG.

5

what should I do instead? I’m lost

6

Ok, so I did this instead,

<code>
    <pre>
const ExampleVar = document.getElementById("example");
  </code>
        </pre>

and it worked? I am happy that it worked but don’t understand lol

7

Although , you passed the test. Maybe the test is looking for code element, that’s you have added. But that isn’t nested correctly. The code element should be nested in pre element.

8

Yeah, that’s what I thought it should be too, and still do think that, but it doesn’t work. It just misaligned them. It was working yesterday, I didn’t touch the code until today, and then today it’s all unaligned! I think it might be glitched?

9

@hasanzaib1389 , does it have to do with this spacing on top of it?

Screen Shot 2024-12-01 at 7.00.23 PM
Screen Shot 2024-12-01 at 7.00.23 PM1098×332 38.1 KB

There is no space in the code, so is it a CSS thing?

10

No, space between dividend elements doesn’t affect on code

11

Hi @accumbensmusic1

image
image1105×139 4.53 KB

Since the code element has a display property of block, incorrect nesting is overriding the display property.

Happy coding