I come once again with a question. This is step 43

HTML-CSS
1

The instructions make no sense.

Nutrition Facts3
Nutrition Facts31156×340 66.5 KB

1 Like
2

This is one which trips up a lot of people as it is tricky to get your head around.

It would be helpful if you could post your actual code instead of a screenshot though, and also a link to the challenge. The easiest way to do this is to click on the help icon which appears after you’ve submitted incorrect code three times.

Help Icon
Help Icon760×373 15.1 KB

Anyhow, here’s a link to the step you’re talking about:

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.

That said, your code is correct. It passes for me.
Did you get it to pass?

1 Like
3

It’s still not working.

1 Like
4

Could you post your whole code please?
Click on the </> icon (or CTRL+e) and paste your code where indicated.

1 Like
5 
  <div class="daily-value small-text">

      <p class="bold right">% Daily Value *</p>
       </div>
      <div class="divider"> 
      <p> <span> <span class="bold"> Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      </div>
    </div>
1 Like
6

Ok, for some reason your tags are the wrong way around here. Moving the closing tag will fix the issue.

1 Like
7 
  <p class="bold right">% Daily Value *</p>
   </div>
  <div class="divider"> 
  <p> <span> <span class="bold"> Total Fat</span> 8g</span> 
  <span class="bold">10%</span></p>
  </div>
</div>`
1 Like
8

Just now seeing this reply. I’ll try.

1 Like
9

@igorgetmeabrain I tried moving the tags around, and nothing is helping. I found a picture of a nutrition label that’s the exact one we’re doing. My formatting on the preview matches that picture.

2 Likes
10

Could you post your amended code once more please? Copy and paste ALL of your code (i.e. everything, including the <html> tags). There may be an issue elsewhere in the code.

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

I’ve just pasted your whole code into the challenge and it passes for me.
There are other reasons why challenges sometimes fail though.

Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.

Have you disabled all browser extensions?
Also, try a hard refresh of the challenge page with CTRL+F5 and then paste the code in again.
Finally, you could try a different browser.

1 Like
13

On the fourth line, there is an extra div cloesd tag.

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.