Learn Typography by Building a Nutrition Label - Step 53

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

Your code so far

Good evening folks!

The hint keeps saying: Your first span Cholesterol element should have the class attribute set to bold. I already did this but it keeps saying I have not done so. Can anyone shed light on this?

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

Amount per serving

Calories

230
<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 class="bold"><span class="alignment">Cholesterol 0mg</span></span><span class="bold">0%</span></p> 
</div>    
```
/* 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

Where is this coming from? I don’t see anything about the class alignment in the instructions. Make sure you follow the instructions exactly. These are the four things you need to do:

  • create a new p element with the text Cholesterol 0mg 0% (you have done this)
  • Wrap the text Cholesterol in a span element, and give that span element the class attribute set to bold (you have done this but you added another span with a class of alignment which you need to get rid of)
  • Wrap the text 0% in another span element, with the class set to bold (you have done this)
  • wrap Cholesterol 0mg in an additional span element for the alignment. (You have not done this. Look at how you did it for Total Fat 8g as an example.)

Thank you! I will be sure to revise it because I thought the instructions said you needed to have a span class with the word alignment in it.