Learn Typography by Building a Nutrition Label - Step 24

Tell us what’s happening:
Describe your issue in detail here.
Can’t find my problem

  **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>
</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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Learn Typography by Building a Nutrition Label - Step 24

Link to the challenge:

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

Hi @balurm38

The clue is that label element and header element are not self-closing element. Meaning they have a pair of tag which consists of opening tags and closing tags.

When you see a tag like this <.../> it is a self-closing tag. Examples of elements that have self-closing tags are: <img>, <meta>, or <br>.

A non-self-closing tags or a normal elements must have both opening tags <...> and its closing tags </...>

Hope that clears out misunderstanding about the <... /> in your label and header :grin:

Step 24

Wrap everything within the .label element in a new header element.
But can’t find the problem.

I can read the instructions. I can’t read what you’re thinking about trying to solve this problem.

<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>
  </body>

Is there any problem
can you find that

It would be polite for you to say something other than ‘fix it for me’.


What is this? I don’t think this is part of the instructions.

Do you have a corresponding closing tag? This is not a self closing element.