Learn Typography by Building a Nutrition Label - Step 24

HTML-CSS
1

I already found similar posts and found out that I didnt need to wrap it around the div element just the .label div content so I fixed it but its still giving me the same error. What am I doing wrong?

Your code so far

/* file: index.Ext.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>
    <h1 class="bold">Nutrition Facts</h1>
    <div class="divider"></div>
    <p>8 servings per container</p>
    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
  </div>
</body>
</html>

/* file: styles.Ext.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;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

Your mobile information:

SM-X218U - Android 14 - Android SDK 34

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

Link to the challenge:

2

You need to wrap the above lines within a header element.

Instead, you have add header element around the div class .label opening tag.

3

Omg I feel like an idiot. Thank you so much. I cant beleive I had such a hard time with this.

2 Likes
4

You’re welcome. Happy Coding.

5

estoy completamente atascada, lo tengo asi y me da la siguiente correccion:

  1. Tu header elemento debe estar dentro de tu .label elemento.
  2. Sus elementos h1 div y p deben estar dentro de su nuevo header elemento.


Nutrition Facts



8 servings per container


Serving size 2/3 cup (55g)

6

Hi there and welcome. Create your own topic to the challenge step using help button. It’s appear below the challenge editor, when you try to submit wrong code more than three times.