Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Tell us what’s happening:
Appreciate for the help. where I can place my span?

Error: Your span element should come after your .left-container 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>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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

You nested the span inside of the .left-container element. You want to place it below (or after) the .left-container element.

3

I try to do that but still not goin through.

4

You’ll need to paste your updated HTML in here so we can see what you tried.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

6

I try this but still I’m stuck.

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

hi, please try “below the .left-container element”,not in .left-container element. :grinning:

8

I did but still an error.

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

Mod edit: removed solution

10

thank you…I analyze this for 2 hrs hehe

11

Sometimes I do the same, other people can see the problem more easily, so let’s help each other! :grinning:

12

Yea, this forum is helpful because if you stuck to your code then you can ask for help.

13

@Cary_Chen

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.

14

Sorry, I’ll note later, thanks for the reminder.

15

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