Learn Typography by Building a Nutrition Label - Step 33

Tell us what’s happening:

Can anyone help me out ,this isnt working.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.

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"> 
        <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/123.0.0.0 Safari/537.36 Edg/123.0.0.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 33

1 Like

you need to create the 230 paragraph outside of that div

Hello!
Okay so you got the first part right. Good job on that. Now for the second part, you need to create a span element that comes after your .left-container element, with the text 230
Go ahead and see if you can do it.

1 Like

this is what i did and it didnt work

230

Amount per serving

Calories

this is what i didi an dit didnt work

230

Amount per serving

Calories

this is what i did an dit didnt 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>
1 Like

Your 230 in your span element should come after your .left-container.
Your .left-container is this:

1 Like

after the left container div not inside

1 Like