Learn Typography by Building a Nutrition Label - Step 43

Hi, I have no idea what I’m doing wrong here, I have tried changing it a lot of ways and I cannot seem to figure it out … it is writing “One span element should wrap the text [Total Fat]”. I have there the Total Fat and it still is not working. Thanks for any help!

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 class="bold"> 8g</span><span> 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/124.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

Helllo and wellcome.

Your issue is here:

Advice: reset the step and start again. I give you an example of use. You can review it and adjust your code.

example:

  • create a p element and give it the text Text 12 34

You need write <p>Text 12 34</p>

  • Wrap the text Text in a span element.

You need write <p><span>Text</span> 12 34</p>

  • Wrap the text 34 in another span element.

You need write <p><span>Text</span> 12 <span>34</span</p>

  • Finally, nest the Text span element and the text 12 in an additional span element for alignment.

You need write <p><span><span>Text</span> 12 </span><span>34</span</p>

Look this example. Adjust your code and don´t forget to apply the corresponding class to the span

Greets.

Hey, welcome and good luck in the next steps. For this one, make sure to follow the instructions step by step:

  1. Wrap the text Total Fat in a span element with the class of bold
  2. Wrap the text 10% in another span element with the class of bold .
  3. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.
    Wrap only and exactly what you are told to in the span elements!!

Thanks so much for your kindness. I have found the mistake and solved the problem.
Thanks again, have a good day!

1 Like