Learn Typography by Building a Nutrition Label - Step 22

Tell us what’s happening:
Describe your issue in detail here.
I don’t understand what to do here. It says Your spanspan element should have the text 2/3 cup (55g) . as the hint
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>

<!-- User Editable Region -->

  <div class="label">
    <h1 class="bold">Nutrition Facts</h1>
    <div class="divider"></div>
    <p>8 servings per container</p>
    <span><p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
  </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;
}

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

.bold {
  font-weight: 800;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

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

Link to the challenge:

Restart your step and don’t edit anything inside the p element

You should create a stand alone of the span element.

Right now what you have done is nesting a p element in span element.

Thanks, but it turns out that there was a span before the p element

Have you passed?

If not copy your latest code and we will try to figure it out

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