Build a Nutritional Label - Step 44

HTML-CSS
1

hi. doing the build a nutrition label. and now running into an issue. cannot figure out the nested span and span bold. can any one help.
marvin.
ps: pasting the error code, the link to the step and my code.
marvin.

You should have a span element around the code Total Fat 8g.

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
</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 class="bold right">% Daily Value *</p>
      <div class="nutrient">
<p>
  <span>    <span class="bold">Total Fat</span> 8g</span>
  <span>10%</span>
</p>
</div>
    <div class="divider small"></div>
  </div>
</body>
</html>
2

Try removing the space between the two span elements.

3

Hi @BlindVisionMan Can You tell us which part of code are you getting error ?

4

HI, THIS CODE.
AND TRIED ABOUT 15 OR MORE TIMES. DID RESEARCH IT ON GOOGLE.
AND USING VISUAL STUDIO CODE. AND JAWS 2025 WINDOWS 11 PRO.
IT IS THE SPAN BOLD FOR THE TOTAL FAT AND 8G. NOT LIKING IT.
AND TOTALLY STUMPED.
MARVIN.
PS: PASTING THE ERROR AND MY LINE OF CODE.
You should have a span element around the code <span class="bold">Total Fat</span> 8g .

type or paste code here
```        <span><span class="bold">Total Fat</span> 8g</span>
5

Hi @BlindVisionMan

You added an extra div element, which has the class divider small.

When I copied and pasted the code from your second post, the step passed.

When I removed the white space between the two span opening tags and also removed the extra div element, the step passed.

Please reset the step to restore the original code.
Then add the span element.

Do not modify any of the other code.

Happy coding

6

hi. so did remove the extra div from divider small. how do i remvoe the white space from the span bold class and then get it to pass?
let me know.
marvin.ps: using a screenreader jaws 2025.

7

hi, i did reset. still not liking it. so took out the extra div from the divider small, so how to remove the white space.
marvin.

8

The task is to add a span element. Why would you remove a div?

9

I indicated where you placed an extra div element.

You’ll need to reset the step first, then add the span element.

10

hi. got it to work.
thanks.
marvin.

1 Like
11

Hi, you should write that code like this :

13

hi @mr.agi.ibrahim

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.