Learn Typography by Building a Nutrition Label - Step 44

Tell us what’s happening:
I can’t get past step 44 which is asking me to do this:
Below your element with the Total Fat text, create a new p element with the text Saturated Fat 1g 5% . Wrap the 5% in a span with the class attribute set to bold . In this case this is enough to align the percentage to 5% .

The response I’m getting is:

Test

Sorry, your code does not pass. You’re getting there.

Hint

You should create a new p element below your element with the Total Fat text.

I’ve read through as thoroughly as I can and tried a few different things but can’t work out where I’m going wrong - any advice very gratefully received!

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">10%</span></p>
      <p>Saturated Fat 1g <span class="bold">5%</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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

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

Link to the challenge:

Welcome to our community!
The class has a value of “indent” not “bold”, and the class belongs to the ‘p’ element (it goes into the opening ‘p’ tag).

The problem is that you changed the old code.
The original line of code that was in the editor that you changed was this one
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>

and you changed it to
<p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>

So I suggest you reset and just add the new code below the original line.

Thank you! Don’t know how I managed that (and not 100% sure why that span is in there) but I can carry on now

1 Like