Learning typography by buiding a nutrition label step 43

HTML-CSS
1

freecodecamp problem 101
freecodecamp problem 1011920×1080 183 KB

In this step, I’ve tried everything as mentioned in the instructions, yet I cannot get past this problem.

2

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

You didn’t add this span.

Also, the p element you add should come after the divider div, not before.

If you still need help after trying to fix your HTML then please paste it in here so we can see the actual HTML and test it for ourselves using the following method. Pics of code are not ideal.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
3

can you send this same solution but just the code structure, because i did do it as mentioned yet i was faced with the same trouble. thank you for pointing it out, i’ll be more careful the next time i post on the forum.

4

You need to show us what you did. Please post your updated HTML in here using the triple back tick method explained above.

5 
<!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>
      <p>
        <span class="bold">Total Fat<span> 10% </span> <span>8g</span> <span class="bold">10%</span>
      </p>
      <div class="divider"></div>
    </div>
  </div>
</body>
</html>
6

I did post the HTML code as required, but there is still no response, what shall i do?

7

You added an extra closing div tag after the first p element.

You still need to place the new p element after the divider div.

You did add a third span inside the p element but you didn’t quite add it correctly.

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

You only put the 8g text inside of the span.

8

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