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

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 .
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

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

Link to the challenge:

What about those instructions or the error message is confusing you?

The error message is confusing

What about the error message is confusing?

It helps if you use your words to describe what has you stuck. Everyone has different sticking points.

The error message is

Your span element should come after your .left-container element.

Do you have a question about which element is the span element? Do you know which element is the .left-container element? Do you know where after the .left-container is?

where after the left container is?!

The .left-container is a div. All div elements have both an opening and closing tag. After the div means after both the opening and closing tag.

where should I give the span element ?

After the .left-container element.

Can you identify the opening and closing tags for the .left-container element?

I got it thanks much…

1 Like

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