Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
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 .
what wrong i am doing ?
can anyone help me with this

<!-- 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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

Your span is incorrectly placed. To place it after an element, it should be after the closing tag of that element. Your p element is correctly placed because it is after the closing h2 tag.

3

It should be found below the closing div tag of <div class="left-container">.
After the p element with the text “Calories” you have the closing div tag. Add the span below it.

4

can u reply me with code

5

We don’t post solutions, only guidance to help you find the solution yourself.
You only need to move your span element so that it is placed after the closing tag of the element with class left-container, rather than after its opening tag.