Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

**I need help to complete the last instruction in this step.

Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.:**
Describe your issue in detail here.

Total Fat 8g 10%

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

<!-- file: index.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>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>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
        </div>
        <p> Total Fat 8g 10%</p>
        <span class="bold">Total Fat</span>
      <span class="bold">10%</span>
      <span>Total Fat 8g</span>
      <div class="divider">
        
      </div>
      
    

<!-- User Editable Region -->

  </div>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0

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

Link to the challenge:

2

If I were you I would restart the step to get the original HTML back because you have made changes in places you weren’t asked to and you have added much more than needed. Then follow the instructions very carefully:

  • “After your last .divider element, create a p element and give it the text Total Fat 8g 10%.” Make sure you add this below the .divider div as it asks.
  • “Wrap the text Total Fat in a span element with the class of bold.” You want to do this to the words Total Fat in the p element you previously added.
  • “Wrap the text 10% in another span element with the class of bold.” Again, do this to the 10% in the p element you previously added.
  • “Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.”
3

Thanks a lot for the hint. But its still not passing
One span element should wrap the text Total Fat…this is what shows and when i wrap the text, it still doesn’t pass. Please what am I doing wrong?

Total Fat 10% 8g

4

You will need to paste your updated HTML in here so I can see what you did.

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.

5

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