Learn Typography by Building a Nutrition Label - Step 54

HTML-CSS
1

Tell us what’s happening:

After your last .divider, create a new p element with the text Cholesterol 0mg 0%. Then, wrap the text Cholesterol in a span element, 0% in another, and give each of them a class of bold.

Finally, nest the span element containing the text Cholesterol along with the text 0mg, in an additional span element for alignment.

The error message says “The text 0% should be nested in a span”, but when I nest 0% in a span it says “you should have exactly 3 span elements”. Please 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 no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p>
        <span>
          <span class="bold">Cholesterol</span> <span class="bold">0mg</span>
          </span> 0%</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;
}

.indent {
  margin-left: 1em;
}

.daily-value p:not(.no-divider) {
  border-bottom: 1px solid #888989;
}

Your browser information:

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

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 54

2

this part is correct because it completes the following request:

wrap the text Cholesterol in a span element, and
give […] a class of bold .

The other parts need work. For eg.

You haven’t done anything with the 0% but it says that you should here:

in a span element, 0% in another, and give each of them a class of bold

and

You’ve wrapped 0mg in a span but it never said to do that.
Instead it said:

nest the span element containing the text Cholesterol along with the text 0mg , in an additional span element for alignment.

So you should maybe consider clicking Reset and starting this one again.
There are exactly 3 spans to create.
As mentioned, 1 for the Cholesterol, one for the 0% and one last one that ‘spans’ over the first 2 words (Cholesterol and 0mg including the span element used on Cholesterol)

3

Oh my goodness. Thank you so much. I reset that one and retried it about 10 times before posting, but for some reason was blind to the request to put 0% in a span and not 0mg. I appreciate your help.

2 Likes
4

It is a common mistake. Don’t worry about it.
You definitely wanna search the forum though as people have asked similar questions here before and it would have helped you see the error faster.

1 Like