This is my code for Step 33 Typography building nutrional label but for some reason its not working

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

This one catches a lot of people :slightly_smiling_face:

“Also below the .left-container element, create a new span element with the text 230.”

To put an element “below” another element means to put it completely below the element. An element ends after its closing tag. So where would you put the 230 span so that it is completely after the .left-container div?

2 Likes
3

I already tried that but its not still working

4

You’ll need to paste your updated HTML in here so we can see what you tried. Please use the following method to do that.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
5
Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

230

Amount per serving

Calories

6

its not still working

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

230

Amount per serving

Calories

7

Hi there! @GwenBentong i see that you are struggling with this particular step. Well, the instructions stated that:

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 .

the way that this step is phrased was ambiguous. The system accepts your script when the element span is placed under the end of the div element classed left container

8

just add the span element after the left container’s closing tag