Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:
Describe your issue in detail here.

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

Challenge: Learn Typography by Building a Nutrition Label - Step 33

Link to the challenge:

“Below your .small-text element, create a new p element…”

This means that the new p element should be placed below, or after the .small-text element. You have placed it before the .left-container element.

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

This means is should be below, or after the entire .left-container element, which includes both the opening and closing div tags for that element. You have placed it inside the .left-container element.

Yes I’ve tried that. When it says below .left-container make a span element with the text 230 I’ve done that but it keep saying Your span element should come after your .left-container element.

You’ll need to paste your updated HTML in here so we can see what you’ve tried. 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.

Also, remember, when you put a new element after another element, such as a div, that means after both the opening and closing tag for the div.

Then i put the span element below the p element and now it is saying Your p element should have the text Calories . even tho it does

Calories

This is what I have

Amount per serving

Calories

230

Amount per serving

Calories

230

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

The 230 span goes below the .left-container div. You have put it inside of the .left-container div. As I mentioned previously, when you put a new element after another element, such as a div, that means after both the opening and closing tag for the div.

I have tried putting the span element with the text 230 under the left-container element but it says it should come after

When you try something new you have to paste your new updated HTML in here? Otherwise I can’t see what you did.

I have figured it out thank you it was obvious I just couldn’t see what it meant

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

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