Stuck on step 24 of typography exercise, please help

HTML-CSS
1

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>
 <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>
</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 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 24

Link to the challenge:

2

Two things:

  • It looks like you added a label element around the .label div. The instructions didn’t ask you to do this so I would get rid of it.
  • I agree that the instructions can be a little tricky to understand for this step. Let’s read them again:

“Wrap everything within the .label element in a new header element.”

“Within the .label element” means inside of the .label element, so you don’t want to include the .label div in the header element you are adding. You only want to wrap the child elements inside of the .label div in a header.

3 Likes
3

Thank you, your answer is helpful, really appreciated.

4

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