Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:
Describe your issue in detail here.
I’m stuck on step 43 of this lesson and I believe that I’m correct, but it keeps on saying that I’m wrong. Now normal when this happen, I will admit that I’m wrong some where’s and I go back through and I fine it. But this is a different story. it tells me this: 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.
Your code so far
here’s my code:

% Daily Value *

Total Fat 8g 10%

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <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">

  <div class="label">
      <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>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
    <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>
       <span class="bold">Total Fat</span><span>8g</span><span class="bold">10%</span>

<!-- User Editable Region -->

/* 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/ Safari/537.36

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

Link to the challenge:

There is a mistake.
Why did you wrap 8g by itself in a span?

1 Like

because it seem more logical to do it that way. what was supposed to be ?

Total Fat 8g 10%

Okay but the instructions and testcase expect something else?

If you reread the instructions, you are missing something instead of the span around the 8g

I still don’t see what Im doing wrong. I keep on doing different things. I don’t see any other way plus it looks correct.

This is the one you didn’t do yet.

yea that one doesn’t make any sense. how do you do it then.

I did it like that and once again it said it wrong. has to be this damn problem on this site

why would you put Total Fat in one span and then put Total Fat 8g in another span.

the exercise says that the additional third span (around Total Fat 8g) is needed for the alignment of the text on the page.

So just start typing <span> and place it to the right of the word Total (but not to the immediate right as there is already a span tag there) and then type </span> to the left (immediate left) of the 8g.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.