Learn Typography by Building a Nutrition Label - Step 60

HTML-CSS
1

Tell us what’s happening:
Step 60 I keep getting an Error I cannot figure out what I’ve done wrong. I’ve tired many times and keep getting the error

“” Your new p element should have the text Includes 10g Added Sugars 20% .“”

Your code so far

<!-- file: index.html -->
<!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>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div></div>
\\\
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%<span></p>
\\\
<!-- User Editable Region -->

  </div>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}


.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

.indent {
  margin-left: 1em;
}

.double-indent {
  margin-left: 2em;
}

.daily-value p:not(.no-divider) {
  border-bottom: 1px solid #888989;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.203

Challenge: Learn Typography by Building a Nutrition Label - Step 60

Link to the challenge:

3

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

1 Like
4

You just need to add the div below it with the class divider.

5

@Life.Blessed I already checked that but it didn’t make a difference the error still came up.
can’t for the life of me figure out why.
paste an image of your code…

7

Hello friend!
i just solved this, I believe there is a missing part of the instructions and also you have not closed the span tag inside the last p tag you just added.
add the closing / to your last span like this:

Also, this is the missing part, you need to create a new div element after the new p element you’ve just coded. And make it a divider by adding the class “divider”
like this:

and it should work for you

8

That did not work I still get the same error here is the updated piece of code

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

Odd, I just copied the code i posted to you and it worked on my end.

make sure everything is indented correctly, here is a copy of my entire HTML code up to this step, you should be able to go to step 61 if you copied this code directly. if it works for you use this website to see the differences between my code and yours.

mod edit: removed

10

@Nyxsite Please do not share code to pass the challenges

thanks

11

oops, sorry about that. i’ll keep this in mind

1 Like
12

@Down2Derive I think your problem might be here, remove the ( \ \ \ ) then add the p element like the instructions tells you normally.

13

So is there anything wrong with my code? or is it just a glitch in the site?

this is what I have

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

and the error is
Sorry, your code does not pass. Try again.

Your new p element should have the text Includes 10g Added Sugars 20%.

any ideas??

14

Where is your closing p tag?

15

I did that before I knew how to format the code on the form. I have figured it out now so that is not in my final code.

1 Like
16

I added it and still the same error “Your new p element should have the text Includes 10g Added Sugars 20% .”

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

Can you share all the code. There is a possibility theres an issue somewhere else

1 Like
18

This is the code in the box its checking is that enough?

 <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span> </p>
      <div class="divider"></div>
    </div>
19

Reset the lesson, and use the code you have here

it passes for me, but reset just incase something is off

21

I reset it and then copied and pasted that code still the same error. I reset it and typed it out still the same error.
Should I create a new post about it or is it something in the actual lesson I’m missing?

22

Other things you could try are clear your browser cache, try submitting the challenge in a different browser. Then if those dont work, post the entire updated code here. From line 1 all the way down to your last line.

23

Since those did not work here is the code

<!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>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
    </div>
    <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
  </div>
</body>
</html>