Help with step 51 in learn typography

HTML-CSS
1

After your last .divider , create another p element with the text Trans Fat 0g . Italicize the word Trans by wrapping it in an i element. Give the new p element the class attribute set to indent no-divider . Wrap Trans Fat 0g in a span element for alignment.
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-51

it say’s " Your new p element should have the text Trans Fat 0g ."

  <p class="indent no-divider"><i><span>Trans</i>Fat 0g</span></p>
2

HTML elements can only nest inside each other, they can’t overlap.

This will work:
<span><p>I am a paragraph</p></span>

This will create an error:
<p><span>I am a paragraph</p></span>

Look at your <span> element and <i> element. Are they overlapping? How could the element opening tags be moved to prevent this?

<p class="indent no-divider"><i><span>Trans</i>Fat 0g</span></p>

Also in future, please use the ask for help button. It looks like a question mark and will appear after you fail the lessons a few times.

It will make a forum post with your formatted code and browser information that you can describe your coding problem in. :slight_smile:

3

so like this <p class="indent no-divider"><span><i>Trans</i>Fat 0g</p></span>

4

You fixed the span and italics but…

Look at your p element and span element, they are overlapping now.

<p class="indent no-divider"><span><i>Trans</i>Fat 0g</p></span>

Also this is how your code displays as text:

TransFat 0g

Would it make sense for there to be a space after the word ‘Trans’ so the words aren’t stuck together?

5

like this?

  <span><p class="indent no-divider"><i>Trans</i> Fat 0g</p></span>
6

Check the lesson instructions.

create another p element with the text Trans Fat 0g . Italicize the word Trans by wrapping it in an i element. Give the new p element the class attribute set to indent no-divider . Wrap Trans Fat 0g in a span element for alignment.

The <p> element should wrap around everything else, not the <span> element.

7

i tried that and now the new problem I’m having is “You should create a new p element at the end of your .daily-value element.”

<p class="indent no-divider"><span><i>Trans<i> Fat 0g</span></p>
1 Like
8

i figured it out i forgot the closing sign for

9

what closing sign? please help me it is the same problem that I have rn.

10

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

11