Learn Typography by Building a Nutrition Label - Step 24

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I don’t get it how I should position the header element to “wrap everything inside the label 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>
    <h1 class="bold">Nutrition Facts</h1>

<!-- User Editable Region -->

<div class="label">
  <header>
    <div class="divider"></div>
    <p>8 servings per container</p></header>
    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
  </header></div>

<!-- User Editable Region -->

</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;
  display: flex;
  justify-content: space-between;
}

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

.bold {
  font-weight: 800;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

You have extra closing header tags.

I’d advise restarting the step to clear away your edits
image

Your not far off, the yellow area is what you want inside of the header element
image

3

Thank you

I had mispalced the H1-element … and then it got frustrating.

2 Likes
4

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