Learn typography by building a Nutrition Label - Step 33

HTML-CSS
1

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’m having a problem with this lesson. I can’t seem to get this line of code in the right spot. Maybe the code is wrong? (

Calories230

) I keep getting this error message.

“Your p element should come after your .small-text element.”
But it is??

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

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 (').

3

Please include a link to the Step when making a post

4

It looks like the only thing immediately after the small-text element is a closing div?

5

Right, so then I do this and it still isn’t working. The Hint is giving me this message.
" Your span element should come after your .left-container element"

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

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 (').

7

Now the text 230 is not below the left-container element though

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

I put the span element where it told me to put it and it’s still wrong, it also looks wrong formatting wise.

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 end up with this hint:
Your span element should come after your .left-container element

9

This is inside of the left-container (below only the opening tag, not the entire element)

1 Like
10

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