Learn Typography by Building a Nutrition Label - Step 24

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I am getting a error as" Wrap everything within the .label element in a new header element." please help me out, where was my mistake.

   **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>
<header><div class="label"> <header 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>
  </header></div> </header>  
 </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: Learn Typography by Building a Nutrition Label - Step 24

Link to the challenge:

2

It looks like you’ve added two header elements. The instructions are only asking you to add one.

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

The instructions are using the CSS .label syntax as a shortcut for saying “the element with a class name of label”, which in this case is a div. You are supposed to wrap the content inside of that div with a header element. You actually did that in your code above, but you added a class name to it which the instructions did not ask you to do, so get rid of that. Moral of the story, get rid of that extra header element and the class name on the correct header and you should be OK.

3

Thank you your explanation really worked for me.

4

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