Learn Typography by Building a Nutrition Label - Step 24

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">
<header>
  <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">
</header>
<body>
  <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>
   </header>
    </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; rv:103.0) Gecko/20100101 Firefox/103.0

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

Link to the challenge:

2

The instructions asked you to do only one thing:

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

You actually did this correctly. But then you changed the head tags near the top of the HTML into header tags. These are completely different elements. You want to leave the head tags alone. In general, only do exactly what the instructions ask and no more.

2 Likes
3

Hi bbsmooth at the time was doing the code I understood the mistake so I changed to header and that’s why it didn’t work. I still learning and thank you for your answer.
Have nice day.

4

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