Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:
Can someone tell me what’s happening here? I always have an error with this instruction. " 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 ."

Test

Sorry, your code does not pass. Hang in there.

Hint

You should have a new p element within your .calories-info element.

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 tex="230"></span></div>  
        <h2 class="small-text">Amount per serving</h2>
        <p>Calories</p>
  </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:

You need to look at this again.
“ create a new span element with the text 230 .” look at your code, there is nothing in html called “tex”. Its saying a span should have the text 230. Meaning, have 230 as the text inside your span. Like how you have Calories as the text of your paragraph

Hi Cody, already edited my code but still receiving this error

Hint

You should have a new p element within your .calories-info element.

Amount per serving

Calories 230

The issue here is your span. It needs to come after the “left-container” meaning after the closing div tag. You have it before the closing tag

@sabellano.jeremie I would reset the lesson because your closing div tags are out of place from where the challenge sets them. Then make your span come after the closing div tag of left-container.

1 Like

Will try to reset the lesson. Thanks for helping :slight_smile:

No problem, let me know how that goes and if you still need help.

Already solved it, yeah the div tags are out of place. Thanks man!

1 Like

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