Stuck on Nutrition Label step 59

Hello, I am stuck on step 59 (https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-59) which says :

Step 59

Below your .dbl-indent element, add a new p element with the text Includes 10g Added Sugars 20%. Your new p element should also be double indented, and have no bottom border. Use a span to make the 20% bold and right aligned.

Then create another divider after that p element.

I did exactly that, I think, but then get an error message with the hint:

You should create a new p and div element at the end of your .daily-value.sm-text element.

The hint seems to be telling me something completely different from the lesson and I am inclined to think there is a mistake on the page.

My code so far is this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <header>
        <h1 class="bold">Nutrition Facts</h1>
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
        <div class="divider"></div>
        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
        <p class="indent no-divider">Dietary Fiber 4g</p>
        <div class="divider"></div>
        <p class="indent no-divider">Total Sugars 12g</p>
        <div class="divider dbl-indent"></div>
        <p class="dbl-indent no-divider">Includes 10g Added Sugars<span class="bold right">20%</span></p>
      </div>
    </div>
  </body>
</html>

This includes what I have just added which is five lines from the bottom, no where near where the hint is suggesting.

Any ideas? Thanks.

Hi, please provide the link to the challenge.

Hi massih, the challenge is at https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-59
Thanks

Oh, I can see now that it is in the wrong place. I have moved it to below the element as described though it still does not pass. I shall have another look and try an work out why.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <header>
        <h1 class="bold">Nutrition Facts</h1>
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
        <div class="divider"></div>
        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
        <p class="indent no-divider">Dietary Fiber 4g</p>
        <div class="divider"></div>
        <p class="indent no-divider">Total Sugars 12g</p>
        <div class="divider dbl-indent"></div>
        
      </div>
      <p class="dbl-indent no-divider">Includes 10g Added Sugars<span class="bold right">20%</span></p>
    </div>
  </body>
</html>

Nope, I have just redone the whole step and come up with the same wrong code solution that I posted originally. I am very confused and any help is gratefully appreciated.

The code I added is:
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span></p>

below line 38:
<div class="divider dbl-indent"></div>

hi, I think this will help!

<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right">20%</span></p>
        <div class="divider"></div>

Sorry, I am not sure that I understand. The problem is completing the step in the way that the automated process expects rather than finding a solution that works. Given the existing CSS, I think my code works
Screenshot 2022-06-11 at 19.48.17
but it does not do what the app is expecting. This step asks for html rather than css, but thank you. Sorry if I am misunderstanding you.
If you can go to https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-59, and your code passes their steps then I’m all in but it really is asking for one line of html.

This is correct and you were initially adding it in the correct spot. I think you are just forgetting this part of the instructions:

“Then create another divider after that p element.”

it’s okay you can avoid adding the css code I typed. your code will pass.

Oh, I am so stupid! Thank you. Such a daft mistake. But what a terrible hint too!