Learn Typography by Building a Nutrition Label - Step 64

Tell us what’s happening:

I’m unable to see where the mistake lies.

I’ve inserted both the medium divider and the p element after the .daily-value element.
It keeps telling me to add a new div element after the .dialy value element.
I’ve tried both firefox and Chrome browsers to see if that is the problem.

Your code so far

    <p class="right bold no-divider">% Daily Value *</p>
    <div class="divider"></div>
    <div class="divider md"></div>
    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>   
    <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>

```css
/* 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;
}

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

.bold {
  font-weight: 800;
}

.right {
  float: right;
}

.lg {
  height: 10px;
}

.lg, .md {
  background-color: black;
  border: 0;
}

.md {
  height: 5px;
}

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

.calories-info h1 {
  margin: -5px -2px;
  overflow: hidden;
}

.calories-info span {
  font-size: 1.2em;
  margin-top: -7px;
}

.indent {
  margin-left: 1em;
}

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

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

Link to the challenge:

hi,welcome to our community!
you should be adding the elements(div and p) after the closing tag of div with the class .daily-value

Welcome to our community!
The following should be found before the code requested by the instruction:

You have deleted some lines of code or added more than is required. Restart the step.
As you can see you have “% Daily Value *” two times in your code.

Thank you, I deleted the irrelevant code, thinking it would make it clear what I was struggling with.

No luck yet.

<!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>    
        <div class="divider md"></div>
        <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
        <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="right bold">20%</span>
        <div class="divider"></div>
        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
        <div class="divider lg"></div>
        <p>Vitamin D 2mcg <span class="right">10%</span></p>
        <p>Calcium 260mg <span class="right">20%</span></p>
        <p>Iron 8mg <span class="right">45%</span></p>
        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
      </div>
</div>
  </body>
</html>

Thank you, I figured it out, didn’t realise know what after the daily element meant.

1 Like

After the closing ‘div’ tag of the ‘div’ element with the class set to " .daily-value (find it) add another <div class="divider type"></div>
and then, the ‘p’ element with the class set to “note”, and with the given text in the instruction:

<p class="smth">Text</p>

All of this is just guidance.

Thank you, I got it.

Placed it too high on the code, instead of after the “daily element”. Visually it looked the same.

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