Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:
Describe your issue in detail here.

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>
 <p><span class="bold"><span>Total Fat</span><span>8g</span></span> <span class="bold">10%</span></p>
<div class="divider"></div>
</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/116.0.0.0 Safari/537.36

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

Link to the challenge:

Hello!
Please tell us what the problem is in your own words. Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

I keep using the code which i think it is right but it keeps saying to put a new p under my last .daily value

1 Like

Hello!

Thank you for explaining the problem with the code for us.
In all honesty, this is one of the trickier Steps to complete.
But, you are doing good and will get past it. :slight_smile:

Your new p element with the text Total Fat needs to be placed after the divider below the p element with Daily Value in it.

I, also, noticed the span elements appear to be a bit off.

Some tips for the span elements.

The 8g should not be in a span by itself.

The span that should include both the Total Fat and the 8g should nest the span class bold that is around Total Fat.

Spacing can be an issue, too.

I hope the above helps you some.

Keep up your great progress! :slight_smile:

Hii ! Dude in this step…

1st you need to add Total Fat in a <span class="value"></span>
2nd then wrap Total Fat and 8g in another <span></span>

<span><span class="value">Text1</span>Text2<span>

3rd need to wrap 10% in another <span class="value"></span>

Hope this help you :blush:

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