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 span element with the class of bold. Wr

I’m not sure what I’m doing wrong it says "Your p element should have three span elements. but it does

<p><span class="bold"><span>Total Fat </span></span>
           <span>8g</span><span class="bold">10%</span></p>

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

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 span element 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.

i followed this but it for some reason keeps saying i need three spans even though i alreadly have three

Please post a link to the Step you are working on.


I see 4 span elements instead of 3.

First:

Wrap the text Total Fat in a span element with the class of bold .

Second:

Wrap the text 10% in another span element with the class of bold .

Third:

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

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

where do you see the fourth one ?

Here are two spans

and at third

and a forth

you mean this ? is this the fourth one you were talking about ?

I mean that you have 4 span elements but the instructions tell you to write only 3.

There are 4 opening span tags (I quoted them above) and 4 closing span tags.

could i get a example cause its still not working

<p>
  <span class="bold">Total Fat </span>
  <span><span class="bold">8g</span> 10%</span>
</p>

I cannot write the solution for you, no.

These spans don’t follow the instructions given.

I’d back up and start with only the text and then add the spans one by one.

Can you

After your last .divider element, create a p element and give it the text Total Fat 8g 10% .

and nothing else? What does that code look like?

<p> Total  Fat 8g 10%</p>

Cool, now lets add spans one by one. I suspect the first two steps you can do fine

What’s the code look like with those two added?

<p> <span class="bold">Total  Fat </span>8g <span class="bold">10%</span></p>

You have some extra spaces in there that you should trim out. But this is pretty close.

Here is the part I think is tripping you up

This instruction says to add one span around both the Total Fat span and the 8g text.

<p><span> <span class="bold">Total  Fat </span>8g</span> <span class="bold">10%</span></p>

Me using words and you just pasting code at me is a bit freaky tbh.


That looks close, but I would make sure that your spaces are right, like I said here

so the spaces bewteen span and total fat ?

You need to keep the spaces show here, and make sure the span tags don’t include extra spaces.