Learn Typography by Building a Nutrition Label - Step 64

HTML-CSS
1

Tell us what’s happening:
Hello everyone.
I´ve tried this one a couple of times. Checked on the published answers and my code seems to be ok. As some other users, have the same: " You should create a new “div” after your .daily-value element."
As you can see there is a “

” after the “.daily-value” element. But still have the error. Have tried this from mozilla and chrome with the same issue in both browsers, please help!

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

/* 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 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

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

Link to the challenge:

2

This whole section is the div you are supposed to write the new code -after-.
This is why when you reset this step the editor has placed a blank line for you to write the code there.
(Try the reset now and notice that blank line).

Once the code is created in the expected spot hopefully you can pass this.

3

hbar1st, ty so much on such a quick answer, really blew my mind.

I have noticed the blank space, but its confusing sometimes when you are not a native english speaker. Ty so much on taking the time to respond. Have a great day ahead!!! awesome material!

1 Like
4

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