Learn Typography by Building a Nutrition Label - Step 43

it’s refusing even though I followed all the steps

Your code so far

/* file: index.Ext.html */


<!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 class="right">2/3 cup (55g)</span></p>
    </header>
    <div class="divider lg"></div>
    <div class="calories-info">
      <p class="bold sm-text">Amount per serving</p>
      <h1>Calories <span class="right">230</span></h1>
    </div>
    <div class="divider md"></div>
    <div class="daily-value sm-text">
      <p class="right bold">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
    </div>
  </div>
</body>
</html>

/* file: styles.Ext.css */


<!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 class="right">2/3 cup (55g)</span></p>
    </header>
    <div class="divider lg"></div>
    <div class="calories-info">
      <p class="bold sm-text">Amount per serving</p>
      <h1>Calories <span class="right">230</span></h1>
    </div>
    <div class="divider md"></div>
    <div class="daily-value sm-text">
      <p class="right bold">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
    </div>
  </div>
</body>
</html>

Your mobile information:

iPhone - iOS16.3.1

Challenge: Learn Typography by Building a Nutrition Label - Step 43

Link to the challenge:

Hi there and welcome to our community!

You’re almost right but you’re missing a span element.

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.

You have added the first span element correctly.
The second span element should have a class of ‘bold’ not ‘bold right’ and you need to be mindful of the spaces in your p element. It currently reads ‘Total Fat 8g10%’ because you’ve lost a space after ‘8g’.
You also need to include a third span element (with no class attribute), which wraps around the text ‘Total Fat 8g’ (including the span which is already around ‘Total Fat’).

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