Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
Hi! My code keeps failing on this step as it says “One span element should wrap the text Total Fat.”

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>
        <span>8g</span>
        <span>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/117.0

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

Link to the challenge:

2

Welcome to FCC Forum, a community where everybody helps each other.
This is probably one of the most difficult steps I faced when completing the lessons.

It is important to keep the code all on one line, not to break it up with spacing and enter.
With that in mind, you are very close to success.
By taking the opening span that is placed around before the 8g and moving it to before the first span, that would be correct with only a space after the anchor behind the 8g.

Due to all of the extra space issues, I suggest resetting the step and enterring the span as you have done, with the exception of moving the span from before the 8g to before the first span. There should be two opening spans before Total Fat.

< span>< span with attribute and value>Text< /span>text < /span> < span>text< /span>

I hope this helps you!

Keep up the great progress! :slight_smile:

3

It worked! (Also, I only spaced the code to make it a bit more clear, I usually do no formatting at all, which is probably not better)

1 Like
4

Keep up your great momentum on your coding path! :slight_smile:

1 Like