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> 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;
}

Hello everyone, kindly walk me through this. below is the coe.

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

below is the 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 .

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

1 Like

do you see where is the end of the .left-container element?

Yeah that’s what I done 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>

It really helps if you talk about what has you stuck!

put a span down in the end of .left-container

done but didn’t work.

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

I’m stuck with were to position the span element exactly.

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

that is the same spot as before

1 Like

The span element is placed wrongly. Yours is inside the div element instead of below it, as instructed. try this:

1 Like

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

This span is inside of the left-container. It must come after the entire left-container element.

1 Like

Done but still the same thing.

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

No, that is still not after the entire left-container element. It’s after the opening left-container tag and before the closing left-container tag.

2 Likes

Roger that. done and succeeded. thanks Jeremy.

1 Like

Hi Jeremy,

I’m so sorry, had no idea that’s how it’s done here. Thanks for the correction. Duly noted.

Mod Edit: SOLUTION REMOVED

Sol

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.