Learn Typography by Building a Nutrition Label - Step 24

Tell us what’s happening:
Describe your issue in detail here.
how do wrap the header in a label element i have tryed it so meny times but it doesnt work. plz get back to me as soon as possible

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

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

Link to the challenge:

instead of wrapping the whole .label element, just wrap the lines within it.
(so everything except the outer div should be in the new header element)

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