Learn Typography by Building a Nutrition Label - Step 43

I can’t find the mistake. Have tried to remove and add space/p element before or after the closing of the div/all in one line of nested in different ones… former answers in similar posts seems to have been deleted from the forum.

Instructions:

Step 43

After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Wrap the text Total Fat in a spanelement with the class of bold. Wrap the text 10% in another span element with the class of bold. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

“Your code does not pass. You should create a new p element at the end of your .daily-value element.“

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

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/113.0.5672.69 Mobile/15E148 Safari/604.1

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

Link to the challenge:

1 Like

You see this div: (<div class="daily-value small-text">), all of the code below that div goes inside that div, so remove the closing div tag next to it cause it supposed to be closing at the end of your last p tag. Your problem will be solved.Preformatted text

1 Like

Welcome to freecodecamp forum, toni.lachmal!

As explained by LungileFuze, if you remove the closing div element above your p element, and test your code, it should pass.
The way is currently is

it appears that the instructions were misunderstood. It said to place the p element directly after the last divider, which would place it above the closing div.

Happy coding!

1 Like

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