Learn Typography by Building a Nutrition Label - Step 30

HTML-CSS
1

Tell us what’s happening:
Hi the step asks " Within your .calories-info element, create a div element. Give that div element a class attribute set to left-container . Within the newly created div element, create a h2 element with the text Amount per serving . Give the h2 element a class attribute set to bold small-text ."

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-containter">
<h2 class="bold small-text">Amount per serving</h2>
    </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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

This change to this div was not requested

You have a typo here.

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

What does it mean when the hint says “You should create a new div element within your .calories-info element” I assumed that meant to add <div class= ".calories-info"> </div>

4

This means that you need to make a div inside of the .calories-info div that already exists. “.calories-info” is a short way of saying “the element with the `calories-info’ class”.

5

Ohhhh I got it now thank you!!