Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

I keep getting the error message " Your p element should have three span elements. ".

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>8g<span class="bold right">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; rv:109.0) Gecko/20100101 Firefox/109.0

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

Link to the challenge:

2

You are missing spaces between the words and you are missing the third span that they asked for

3

i dont understand where would the 3rd span element go?

4

i put spaces in between the words but i still dont know where the third span would go, it says to nest " total fat" and " 8g "

5

They said to put the last span around the “ Total Fat span element and the text 8g”

6

image
image1089×272 13.9 KB

now i get this error.

7

You have too many spaces now.
You need zero extra spaces in each span.
And you need one space between each element so that the final result is as expected

8

i dont understand. Im putting the spaces but still getting the same error messages.

9

image
image1727×559 54.7 KB

1 Like
10

image
image1708×554 54.2 KB

11

This one now has moved the span tag to the wrong place.

While the previous attempt had the correct span tags in the right place but had a spacing issue within them (don’t put spaces inside the span for Total Fat)
There should be one space between the span for Total Fat and the next word.
And one space between the last span and the previous element