Tell us what’s happening:
Describe your issue in detail here.
I’m putting <h2>
in various places, but I’m not getting it right. I’m tired of guessing. I need help. It says the .label
spot, but I’m doing it after the nutrition facts title, going to .label and in the same .div
class. But somehow I’m not getting it. Again I’m just guessing.
**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">
<h2> <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>
</h2>
</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;
}
h1 {
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px
}
p {
margin: 0;
}
.divider {
border-bottom: 1px solid #888989;
margin: 2px 0;
}
.bold {
font-weight: 800;
}
.right {
float: right;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14816.99.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Learn Typography by Building a Nutrition Label - Step 24
Link to the challenge: