Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:

Please help, I’ve tried many variations of moving the code 230 to .left-container element.
but its only when I place it after the Calories does the 230 text appear to the right of the calories.
thank you.

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)
Amount per serving

Calories230

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">
        <h2 class="bold small-text">Amount per serving</h2>
        <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 (X11; Ubuntu; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 33

It looks like you are trying to jump the gun a little bit.
The 230 text will appear to the right of the calories text but a later CSS step will accomplish that.

For now, you will see the 230 text to the bottom of the calories text

Hope that helps

I’ve now moved it see code below

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

But it still saying
Your span element should come after your .left-container element.
Thank you for your response :smile:

Pay close attention to this part of the original instructions

Also below the .left-container element,

Right now the span is inside the left-container div. Not below

Once I move that span in the correct spot, it passes

Yep got it, nice one, really appreciate the advice.