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
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.
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.