its telling me to me to wrap everything inside the .label element inside a header element. im lost because i know .label is in the stylesheet.
<!-- 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>
<!-- User Editable Region -->
<body>
<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>2/3 cup (55g)</span></p>
</div>
<!-- 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/113.0.0.0 Safari/537.36 Edg/113.0.1774.50
Challenge: Learn Typography by Building a Nutrition Label - Step 24
Link to the challenge:
.label element refers to your html element with the class label assigned to it. So per the directions you need to wrap everything in that element inside a new header element
<html lang="en">
<header>
<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">
<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>
</div>
</body>
</header>
</html>```
do you mean like this. if so it didnt work im still lost.
So the directions say
" Wrap everything within the .label element in a new header element."
Where does your html element that has the class label start? Where does it end?
it starts after the second body element. but ive tried to create a new header right after the second body element but it didnt work either. ive also tried to replace the div element and the body element but that didnt work.
What second body element? There is only one body element. The label does start after the body, and where does it end?
Can you show the code where you put the header around the label element. You can use the format button that looks like </> and paste your code between the lines
yeah my bad it is only one my bad.
<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>
<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>2/3 cup (55g)</span></p>
</div>
</header>
</body>
</html>```
Ahhh ok, now I see. Reading is important, I looked over it too quickly. You need to wrap everything inside the label element, but not the element itself. So your header needs to come right after that label element, and end right before the ending of the label element
this didnt work either
<html lang="en">
<header>
<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">
<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>
</div>
</body>
</header>
</html>```
Because for some reason you thre your header all the way at the top again, and ended it all the way at the bottom. What I said was
Where does your label element start and end again? Or, I should say where does your element with the class “label” start and end. That might be more helpful
it starts after the body label
Right, and if you look back to what I said
To make this more clear since there is no label element. The header needs to come after the element opening tag with the class of label, and the header needs to end right before that element with the class of label ends
still didnt work bro
<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>
<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>2/3 cup (55g)</span></p>
</header>
</div>
</body>
</html>```
Where is your opening header? Before or after the element with the class of label?
this is what i got from what you said.
<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>
<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>2/3 cup (55g)</span></p>
</div>
</header>
</body>
</html>```
Do me a favor and show what element you think is the “element with the class of label”
I completed the Responsive Web Design cert a few days ago. As an aside I think the tutorials are great. That being said, I do think that they can be improved and one of my issues is this whole referring to an HTML element by its class or id name.
I got lost several times just as TheCool did in this and other sections and I’ve been a freelance graphic, web and ui | ux designer since 2000. In that time I’ve never once heard anyone on stack overflow at the W3 or elsewhere refer to an html element by its class or id name. It seems logically misleading to the new learner and was very misleading to this older learner.
One suggestion for better understanding would be to ask the learner in the tutorials to…for example "wrap everything inside the div element with the class .label " and so on. It’s not that much more in the way of text and it’s clear.
if im ot mistaken its the div elements
You are right its the div element, and a few posts up I mentioned the header needs to come after that opening tag, but you ended up putting the header before the tag