Learn Typography by Building a Nutrition Label - Step 24

Tell us what’s happening:

Describe your issue in detail here.
i dont understand what they mean by wrap my header elements within my .label element

Your code so far

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

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

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

.header{
  
}

Your browser information:

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

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 24

1 Like

Hello hizrel123!

The challenge instruction is as follows:

Step 24

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

The code you are provided with is as follows:

You will note that the first div element in the code provided (above) has a class attribute with the value label assigned to it. The label class value uniquely identifies this div element - at least in this block of code - and in css the label class selector would be written with a

.

prefix like so:

.label {
...
}

Hence, it could be referred to as a .label element.

Your code is very close to what it should be to pass. Just move your header element inside the div element to surround everything inside the div.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like