Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

After your last .divider element, create a p element and give it the text Total Fat 8g 10% . Wrap Total Fat in a span element with the class set to bold . Wrap 10% in another span element with the class set to bold . Also wrap the words Total Fat 8g in an additional span element for alignment.

Test

Sorry, your code does not pass. Try again.

Hint

One span element should wrap the text Total Fat.

what i am doing wrong ?

<!-- 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>Total Fat 8g 10% <span class="bold">Total Fat</span>
      <span class="bold">10%</span><span >Total Fat 8g</span>
    </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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

hi there,
the task here is to align the “Total Fat 8g” to the left and the "10%“to the right. They should appear only once, not three times as seen in your code. Basically spoken there is a span within a span. If you follow the construction sentence for sentence one should be able to see how " 8g” aligns to the left.
In your code you can simply delete the last span of the div and the first " TotalFat8g10%"behind the p-element.
Then you can set the “8g” behind the closing-tag of the first span.
So far, so good. When looking at your plain view, you will see the “8g” in the middle.

The "8g"should align with the(bold written)“Total Fat” at the left.
That is the reason why the (bold written)“Total Fat” and the “8g” need to be wrapped in another span. (without a class).
Happy coding!