Learn Typography by Building a Nutrition Label - Step 24

Tell us what’s happening:
Describe your issue in detail here.

I want to wrap everything within my label element in a Header element
so why my code is not working?
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/105.0.0.0 Safari/537.36 Edg/105.0.1343.33

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

Link to the challenge:

Hi @hossamayman2399

Your first hint is

Your header element should be within your .label element.

Based on your code,

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

Your .label element is INSIDE the header element. It is the other way around.
your header element needs to be INSIDE the .label element NOT outside.

Hope that helps

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