Build a Nutritional Label - Step 45

Curriculum Help
,
1

Tell us what’s happening:

Step 35: building a nutrition label is not working, it keep telling me the same thing when I have already done it

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 class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g<span class="bold right"> 10%</span></p>
      <p></p>
    <p class="indent">Saturated Fat 1g <span class="bold right">5%</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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Nutritional Label - Step 45

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-nutritional-label/615f6cc778f7698258467596.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Tell us what’s happening:

Step35: building a nutrition label, is not working, I have done what I was asked, but it keep telling me the same thing. (You should have a new p element after your Total Fat 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">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g<span class="bold right"> 10%</span></p>
       <p>Saturated Fat 1g <span class="bold">5%</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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Nutritional Label - Step 45

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-nutritional-label/615f6cc778f7698258467596.md at main · freeCodeCamp/freeCodeCamp · GitHub

3

hello @Abdulhafeez welcome to the forum!

It seems like the seed-code for this challenge was changed. Kindly use the Reset Button (image) located at the bottom of the challenge to reset the challenge and restore the seed-code and then try again.

Resetting the challenge will delete all of your current progression for this step. Make sure to copy the important bits of your current code before using the Reset Button, and paste it afterwards.

Also please do not create duplicate topics for the same challenge. If you have more doubts regarding your updated code, please reply to the original topic.

Thank you.

4

do you think you should have an empty element?

5

It might be worth checking the exact placement of the new <p> element rather than just whether it exists. I’ve run into similar issues in HTML/CSS exercises where a tag was present but placed outside the expected section or nested incorrectly. Comparing your code line by line with the instructions can sometimes reveal a small detail that’s easy to miss.

6

Sorry I mean step 45 not 35. Sorry for the mistake

7

Sorry I meant step 45 not 35. Sorry for the mistake

8

Hey @sampatee,

Good catch on the duplicate! In the future, if you see a topic that’s been duplicated, you can flag it as “Something else” to bring it to the attention of moderators.

9

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.