Learn Typography by Building a Nutrition Label - Step 50

Tell us what’s happening:
I am confused to why i am getting this message

Hint

You should create a new p element at the end of your .daily-value.sm-text element.

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 class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider">
          <p class="indent no-divider"><i>Trans</i>Fat 0g</p>
    </div>
      </div>
    </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;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
  clear: right;
}

.bold {
  font-weight: 800;
}

.right {
  float: right;
}

.lg {
  height: 10px;
}

.lg, .md {
  background-color: black;
  border: 0;
}

.md {
  height: 5px;
}

.sm-text {
  font-size: 0.85rem;
}

.calories-info h1 {
  margin: -5px -2px;
  overflow: hidden;
}

.calories-info span {
  font-size: 1.2em;
  margin-top: -7px;
}

.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/106.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like

This block of code is the .daily value.sm-text element.

The hint is trying to tell you that you have not successfully placed the p element at the end of this element.

1 Like

i tried putting it in end and begoinning and it keeps dinging me

    <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
    <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
    <p class="right bold no-divider">% Daily Value *</p>
    <div class="divider"></div>
    <div class="divider"></div>
  </div>
</div>

Well the “end” means the line just before the div closing tag in the indicated block. Have you tried putting there? If you are still stuck pls show us the code.

i tried again and had my code checked and still getting error

% Daily Value *

Total Fat8g10%

Saturated Fat 1g5%

TransFat 0g

<p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span>8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g<span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans<i>Fat 0g</p>
      </div>
    </div>
  </body>
</html>

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 (').

1 Like

your code is in the correct place now but you have other errors to fix.
Look at the <i> tag, does it have a closing tag?
Also be careful with your spaces. There should be a space before the word Fat.

corrected my errors and still npthing

Total Fat8g10%

Saturated Fat 1g5%

Trans Fat 0g

thanks i figured out my error

1 Like