Learn Typography by Building a Nutrition Label - Step 24

HTML-CSS
1

What’s wrong with my code

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

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"> 
      <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>
   
  </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/108.0.0.0 Safari/537.36

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

Link to the challenge:

2

Your header element should be within your .label element.

3

Read carefully it is asking you to wrap everything which is inside the .label element into a new header element.
Not asking you to wrap the .label element inside a new header element.

4

I have created new header element but again its saying" Your header element should be within your .label element."

5

@Hilly It means you header element should be inside this tag.

6

Thank you!
Now its working.

Nutrition Facts

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

Have you made any changes in the code or is it same as the one you showed at the top?

8

Thank you!
Now it’s working.

Nutrition Facts

  <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>
1 Like
9

We have blurred this solution so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

10

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