Step 33 - Learn Typography Nutrition label

I’ve been trying to pass this, but nothing I adjust does the trick. Am I doing something wrong? I’ve tried different browsers, Edge, Chrome in my desktop. Safari, Firefox in my iPhone. The same thing also happens with the span element, and yes I see the end tag for span is not there, but I’ve had the same results with the correct formatting of span

In the future, it is always better to paste your actual code in here than to provide a pic. Also, you can use the Ask for Help button in the Step itself to post a question here and it will automatically include your code.

From what I can tell from your pic, it looks like the closing span tag you added isn’t quite correct. It might be missing a forward slash. Also, you want to add that span below, or after the .left-container element. You have added it inside that element.

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.

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

I think you added a closing div tag here? Not sure why?
The span tag was supposed to go below the .left-container.
Try to reset and this time, look for the start and end tags of the .left-container as they tell you where the container starts and ends.
The span should not be within the .left-container in any way.

Thanks, here’s what I have so far. I’ve remove the , still seeing an issue. Trying to understand my error.

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

Your span is inside the div, not after it

I don’t think I’m understanding what means “after” or “inside” to me the span appears to go after the div part. I made a slight edit

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

It is after the opening div tag, not the whole div

Might take a break :sweat_smile:

So far

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

This span is after the opening div tag. That puts it inside of the div, not after it. To put the span after the entire div, you need to put the span after the corresponding closing div tag.

Ok did so, I’m being prompted "Your p element should have the text Calories ".

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

Link to challenge:

Starting code:

    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
      </div>
    </div>

You must not move anything in the starting code, only add the new elements that are required.

I’ll reset and try again

It worked, thank you.

1 Like