Learn Typography by Building a Nutrition Label - Step 60

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
steps for this

<!-- 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>
    <div class='divider'></div>

<!-- 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/113.0.0.0 Safari/537.36 Edg/113.0.1774.42

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

Link to the challenge:

Hi there. Can you explain in your own words what you are struggling to understand in this challenge please? The more you say, the more we can help!

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

double check for unneeded spaces

tried everything even restarted the excercise and copy pasted it

In the code you posted, you have a space before “Includes”, FCC is very specific with these, “Includes…” is not the same as " Includes…" Does it work after you fix that?

You did not add the text in the correct place, and you are also still missing a class in your span element. It needs to come right after the .double-indent element, but you have your further down

You do have additional spaces at the beginning and end of your p element (which you should avoid), though that’s not preventing your code from passing.

As @Cody_Biggs says, you’ve put your code in the wrong place, that’s all.
If I move your code to the correct position it passes for me.

1 Like

You’re right, I guess the challenge doesnt check to see if they have the right class is in the span even though it asks for it

I think the instructions are slightly misleading as the right alignment happens automatically by adding the span, rather than by adding any additional class.

Gotcha. I haven’t looked at the css file for this challenge, but just glancing over the code I noticed <p class="bold right no-divider">% Daily Value *</p> had the class right. So I thought that’s what it was asking for specifically. Which interestingly, it will still pass even if you add on the right class. Maybe because its only checking to see if the bold class is there

so what should i do? can u explain me

You need to move your p element up

 <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>

Currently, you are placing it and the end of another element not the double indent element. The double indent element ends on this line

<div class="divider double-indent"></div>

You need to place it below this line, and above the </div> so

<div class="divider double-indent"></div>
    </div>

in between these lines

1 Like

Thanks for the help it worked

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.