Help! 2+weeks stuck on this step of HTML nutritions lable


I have tried all of the alternatives I can think of, someone please help me.

1 Like

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

You only have 2 span elements instead of 3.

I know, that’s because I have no idea where the third one goes, it won’t accept span 8g/span and I can’t double the first and last .
I did click the ask for help button, there was no other post regarding this specific issue with an effective answer in the comments.

Its hard to help without seeing your actual code and a link to the challenge. Unfortunately, I can’t put your picture into the editor and make it run.


The third span includes one of the first two, if I happen to be remembering the instructions correctly.

option A: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-43
optionB:https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-43

optionC: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-43
optionD: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-43

I cannot see what you wrote on your computer at those links. Please post your actual code here on the forum.

Please keep in mind I had to delete one bracket of each line so that the code would show a copy of the code not the image of the ingredient label I am creating. The image shows that the label is correctly shown even though the code isn’t processing correctly.

<!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
    <div class="daily-value small-text"<p </p
      <p class="bold right">% Daily Value *</p
      <div class="divider"</div
      <p <span class="bold" Total Fat 8g</span
      <span class="bold" 10%</span
      </p
    </div
  </div
</body
</html
2 Likes

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

This only has two span elements, so like I said above, it cannot be correct.

 <div class="daily-value small-text"<p</p
      <p class="bold right"% Daily Value *</p
      <div class="divider"</div
      <p><span class="bold" Total Fat</span<span 8g</span
      <span class="bold" 10%</span
      </p
    </div

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Please don’t mangle the code when you post it. Please format it per the instructions above.

The instructions say

Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

You only have the text 8g in that third span element, not the Total Fat span and the text 8g.

I mentioned earlier, and sent links to various options, this one is the only one I can visually see as correct according to what the code is asking and it is not correct because " Total fat" isn’t in a span element with the class “bold”.

As I said above, nobody can see the different code that you typed into your browser. You have to post your code in the forum.

Total Fat is in a span. But the Total Fat span is not inside of the third span.

The program says " One span element should wrap the text Total Fat ."
The code I entered is below.

<div class="daily-value small-text"<p</p
      <p class="bold right" % Daily Value *</p
      <div class="divider"</div
      <p <span class="bold"><spanTotal Fat </span 8g</span
      <span class="bold" 10%</span
      </p
    </div

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Again. Please stop mangling the code as you post it. Please use the formatting instructions that I keep asking you to use.