Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:
Describe your issue in detail here.
Question

would you help me guys. the errors are posted in the attached image.

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>
  <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>
    </header>
    <div class="divider large"></div>

<!-- User Editable Region -->

    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories <span class="right">230</span>
      </div>
    </div>

<!-- User Editable Region -->

  </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;
}

header 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;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info h2 {
  margin: 0;
}

Your browser information:

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

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

Link to the challenge:

What about the errors in that picture do you have questions about? I can fix the picture for you with photoshop, but I don’t think that’s what you are asking :laughing:

I write the cod properly, but, the compiler says “Your p element should have the test Calories”. look the text I putted inside p element and the error text (Calories) are the same.
I don’t Understand the error. if you understand please help me

(Theattached image is screenshot of the error)

You are getting the error because your code is not correct.

This p element doesn’t have a closing tag

This span isn’t in the right place

I tried many times by interchanging the place of span, but still, it didn’t work.

could you help me.

What does your code look like if you try fixing the first problem I listed?