I know l'm close. it's asking me to make a new header element. Not sure what that means exactly

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>
   <div <header class="label"></header>      
    <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/103.0.0.0 Safari/537.36

Challenge: Step 24

Link to the challenge:

2

I would restart the step to get the original HTML back. A header element is just another type of HTML element, just like an h1 element. It has both an opening and closing tag. So you want to wrap all of the content within the .label div with opening and closing header tags.

3

This is how it looks reset.

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

l found the solution. l interpreted the instructions wrong. l was nesting the header element inside the div element.

<div class="label">
      <header>
      <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>
5

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