Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Tell us what’s happening:
Don’t understand why span-element is not below .left-container.

Your code so far

/* file: index.Ext.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>
    <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>
  </div>
</body>
</html>

/* file: styles.Ext.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 mobile information:

iPhone - iOS18.1.1

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

Link to the challenge:

2

Hi again @LoveBitterMuffin,

the direction tell that you need to create a p element with text Calories inside it after the h2.

also, create another one, a span element but under/after the .left-container div.

1 Like
3

It’s a common misunderstanding. Below the .left-container element means that the span element should come below the closing tag of the element. If you put it below the opening tag, the span element is nested inside the element, instead of being below the element.

1 Like
4

Hi @bochard! Nice to meet u again!
Look at the code, everything seems to correspond to the instructions.

5

Oh. Thank you! I will learn English better.

2 Likes
6

It’s an easy (and common) mistake to make, for native English speakers too!