Learn Typography by Building a Nutrition Label - Step 33

I really didn’t want to make this post but I am a bit stuck at this step. Is there anyone that could give me tips on this step? I have been trying everything according what the console says but I am clearly missing something.

Requirements according to console:

  • You should have a new p element within your .calories-info element.
  • You should have a new span element within your .calories-info element.
  • Your p element should come after your .small-text element.
  • Your p element should have the text Calories.
  • Your span element should come after your .left-container element.
  • Your span element should have the text 230.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <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">

  <div class="label">
      <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>
    <div class="divider large"></div>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

/* 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

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

Link to the challenge:

You have placed the new span -inside- the .left-container, not after it.

1 Like

Welcome to our community!

The ‘span’ element should be found below the closing ‘div’ tag after ‘p’ element with the text “Calories”.

1 Like

Thank you so much everyone! Really appreciate the quick help, the span is not part of the div, completely makes sense.


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