Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:

I think my code os right ,but it said that my p element should have the text “Total Fat 8g 10%”.

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">% Daily Value *</p>    
    </div>
    <div class="divider">
    </div>
      <p><span><span class="bold">Total Fat</span> 8g</span><span class="bold">10%</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;
}

Your browser information:

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

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

You added an extra closing div tag.

Thank you for your reply.
But I am still confused.

You added the new p element correctly. But you added an extra closing div tag above the divider div. If you don’t see it, that’s OK. Just reset the step to get the original HTML back and then add the p element again, being very careful not to make any other changes.

1 Like

Thank you for your replay.
Is the closing div tag of .class “daily-value small-taxt” an extra tag?
But I think it’s matched.

Remove that extra div closing tags after daily value paragraph element.

And give a space between the above span tags.

I delete the extra closing div tag you said and my code works.
I’m still confused, because I think the first div element does not have a closing tag now.

Shouldn’t every div element have a closing tag?

Yes. div element always have a closing tag

The div class="label" opening tag does not have a closing tag now。

Count your all div elements carefully

If you missed a tag or added any extras, your code will not pass.

Help me,please.
I still can’t figure it out except that the first div element shares a closing tag with div class="daily-value small-text" is a correct rule.

I can understand this.

You had added closing tag for daily value div element in earlier challenge.

The last div closing tag is for .daily-value .small text div.
@forkk