Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Please help!
Instruction:

Step 33

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. "

I did EXACTLY as the instructions say but I’m keep getting the same following error:

Test

Sorry, your code does not pass. Hang in there.

Hint

Your p element should have the text Calories.

Here’s my code so far:

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

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4

It looks like you re arranged some of the elements and they are now out of order.
I would reset the lesson and make sure to only add the paragraph and span elements without moving the left container out of place

2 Likes
6

I am also stuck with the same issue, I’ve tried everything I can think of for DAYS now, and so frustrated!! It keeps telling me: Hint

Your p element should have the text Calories

Here’s what I have so far for reference:

Amount per serving

Calories230

2 Likes
7

I just reset the lesson, for the third time today.

I have this now:

230

Amount per serving

Calories

and the error message now says:
Your span element should come after your .left-container element.

Blockquote

4 Likes
8

Hi there,

In future please create your own topic to discuss your code.

The code you posted has the new spam element inside the .left-container instead of placing this element below it.

Please use the ask for help (question mark) button if you need to ask anything further as everytime you post to someone else’s thread they get notified.

9

Hi, i am getting the same error. Is it me(most likely)? or is something wrong with the code? thanks

2 Likes
10

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.

11

I have the same mistake. I don’t succeed to solve it.

12

Please don’t try to take over other people’s help topics.

1 Like
13

I’ve tried everything as per advices I found from this forum but nothing worked. I think the error is caused by technical issue on the site. Here’s the answer for STEP 33, and I found the answer at the end the lesson, after skipping the STEP 33:

…

Mod edit: solution removed

I tried above answer too on the STEP 33 but it was still giving the same error, which means the error was caused by the technical issue on the site.

14

Please see the answer I posted on the bottom. I found the answer after skipping the Step 33.

15

Here’s the answer I found but the answer won’t work even you enter it on Step 33 because there’s a technical issue on the site. I’ve tried everything including the answer but it’s keep giving the same error:

Mod edit: solution removed
16

Have you tried following the suggestion to force a reset in the step (click the button that looks like an arrow turning first then CTRL-f5 at the same time to go force the browser to update the page.

If yes then pls copy all your code from the very top to the very bottom here for us to see.

Ps. There is no error in the step. Your code was wrong though. Feel free to try the step again and we can help you to understand why.