Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:
Describe your issue in detail here.
I am having a difficult time doing lesson 33 . Learning Typography by building a Nutrition Label. I am cnfuse about how to do it. Can someone help me?
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">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories   <span class="right">230</span></h1>
      </div>
      </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:

the way I deal with these is I split up the instructions into steps and then complete them one by one
So in this case:

Below your .small-text element, create a new p element with the text Calories . Also below the .left-container element, create a new span element with the text 230 .

Becomes:

1- Below your .small-text element (so find that element first)
2- create a new p element
3- with the text Calories
4- also below the .left-container element (find this other element)
5- create a new span element
6- with the text 230

Right now you have not followed this list of things. So I would reset and try this one again. (one step at a time)

Hi there,
I have the same issues and follow the steps you suggested but I cannot get past step 33

I tried this way and gives the hint" Your p element should have the text Calories ." p does have the text Calories in it.

Amount per serving

Calories230

I tried as you suggested (code below) but the hint says: " Your span element should come after your .left-container element." which is where it is

**230**

Amount per serving

Calories

Any other suggestions?

Thanks

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

230

Amount per serving

Calories

not working

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

what the question mean is you should add the span element after the .left-container, not inside the element. So, you should write the span element after the of class="left-container. That is why the question ask this after writing p

it should be like this instead,

Amount per serving

Calories
230

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.