Learn Typography by Building a Nutrition Label - Step 43

Hi Campers
what is the code to pass step 43
can you identify my errors
youtube tutorials is not the latest version of freecodecamp i think freecodecamp update syllabus as why sometimes youtube not so helpful
please guide me thank you much love happy coding

thank you

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 class="bold">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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

1 Like

Hello @DaliaTheOriginal!

Your code is looking great below.

The final challenge instruction states the following:

Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

Nest is just another word for wrap. You need to put the “Total Fat” and the “8g” text inside one span element. That will have the effect of aligning the text to the left.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like
<div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p> <span class="bold">Total Fat 8g </span><span class="bold">10%</span> </p>
    </div>

hey Thanks so much it say 3 span elements where do i add the 3rd span element and pass this step

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like

hey there .
the 3 span elements
there should be 3 within the p element
i did align the total fat 8g

many thanks

<div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p> <span><span class='bold'>Total Fat</span> 8g</span> <span class='bold'>10%</span></p>
    </div>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3 Likes

That looks great. Did you still have an issue?

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