Learn Typography by Building a Nutrition Label - Step 43

what is wrong with this code, since I have given the span as the guidelines?
can, anyone let me know please.

Your code so far

<!-- 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 class="divider"></div>
      <p> <span class="bold">Total Fat</span> 
      <span>8g</span> <span class="bold">10%</span></p>
    </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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

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.

Let’s break down the instructions

  • 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 a third span element but it’s wrapped around the wrong thing, 8g should not be in a span on its own


I am trying my level best, but I am not able to proceed I wrapped the span with Total Fat and 8g, but it is asking me to create p below daily value, I created but still, I’m not able to complete it. can anyone help me since I have been stuck with this from 2 days.

It helps if you post the actual code instead of screenshots

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

can I get any hints for this.

You can post your code so we can copy it ourselves. Screenshots are not that helpful

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

This is where I’m finding difficulty, wrapping the text Total Fat span element and the text 8g in an additional span, and it is asking me to create another p element below the daily-value.

Your code is not in the right place. It should be coming right after the div with the class divider, but you have it after the div with the class daily value

1 Like

Thank you, finally got it.

1 Like