Step 51 Nutrition Label

HTML-CSS
1

Im running in to an annoying problem while doing step 51.

After your last .divider , create another p element with the text Trans Fat 0g . Italicize the word Trans by wrapping it in an i element. Give the new p element the class attribute set to indent no-divider . Wrap Trans Fat 0g in a span element for alignment.

My code is

"<div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider">Trans Fat 0g</p>
    </div>    "

<div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider">Trans Fat 0g</p>
    </div>

The problem is that as soon as I add the elements to Trans I get the error that says The P Class needs Trans Fat 0g so I essentially cant proceed because adding the i as specified kicks back the you screwed up error which isnt making sense. I know my html knowledge is dated which is why im trying to update but Ive used the I element for 20 years. Is there some new way of doing it?

2

What does your code look like when you try to make those changes?

3 
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>

Then I get the error that the entire block of text isnt even there

4

Where is the span element?

The tests can sometimes be delicate.

5 
<span><i>Trans</i> Fat 0g</span>

Really weird. I basically mashed the check code like 20 times and now it accepted it

6

Found out ad block was doing something off after disabling it the checks are running and not removing the code.

1 Like
7

Extensions often work by modifying CSS, so they can really mess with the tests