Learn Typography by Building a Nutrition Label - Step 24

Tell us what’s happening:


Nutrition Facts



8 servings per container


Serving size 2/3 cup (55g)

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>

<!-- User Editable Region -->

<label><header><div class="label">
    <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>
  </div></header></label>

<!-- User Editable Region -->

</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;
}

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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 24

Hello there!

What kind of issue are you having? Talk to us.

You didn’t need to add labal tags. Also header element should be added around the div .label content, not around the div element.

it keeps on giving me an error saying that my headers should be inside my label elament

Wrap everything within the .label element in a new header element. This is the same as saying, wrap everything within the div element with the class name label in a new header element

Above is the .label div element with it’s content in it. You need to wrap the content of that .label div element within the header element.

1 Like

sorry im new at this

it still gives me an error
i created a label around the 2 div and the header only around the first div

if i understand correctly the label is not the issue now its only the header that im not sure where it goes

thank you so much for helping me

You didn’t need to create a label element. The instructions is asking you wrap everything you have in the .label element, in a header element. You need to wrap the content of your div class label, in header element.

I did wrap everything (the div’s) in the header and it still gives me the same error then i only wrapped one with the class label and it still gives me the same error.

Post your updated code here.

here is the updated code

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

header>

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

it keeps bringing error ,and i followed the instruction given

Hi there!

Create your own topic to the challenge step using Help button. That button appears below the challenge editor when you try to submit the wrong code more than three times.