Learn Typography by Building a Nutrition Label - Step 33

Help me I’m stuck there

<!-- 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>
          <p>Calories</p>
        <div class="left-container">
          <div>
            <span>230</span>
        </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/109.0.0.0 Safari/537.36 Edg/109.0.1518.70

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

Link to the challenge:

Your code is all jumbled.

Please click the reset button to restore the code to its initial state.

After that follow the instructions carefully to add the new elements.
You should not change the order of the existing elements. (You are adding code below them but not reorganizing them)

1 Like

I’m having hilarious trouble with the same step.
This is kinda…not even funny, how do I get past this step to work on the next?

Screenshot 2023-02-01 181305

read the last sentence of the instructions more carefully.
It said ‘below the .left-container’ not ‘within the .left-container’

1 Like

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