Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:

The code below displays in the preview correctly but it doesn’t pass. It tells me my p should be below small text. When I move it there then it says my span should be after my left container which it is. Kind of frustrated.

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 33

Hello,
both your span element and p element are currently within your left container div. Your p element should be directly after the h2, and the span after left container div.

Thank you. When I do that the 230 drops to a new line:’

Calories

230

Or like this:

Amount per serving

Calories

230

Neither validate. But what I posted originally did look correct.

Sorry, I posted the code but it just shows the outcome.

Hi @rforster6
Please place the span element below the first closing div tag shown in the code block.

Happy coding

Same issue with me its just not passing the checks and i’m bit frustrated
can someone give the code for it>>>

Thank you. I did that and it worked but the preview looks like
Calories
230
rather than
Calories 230

Probably the next step will adjust that.

1 Like