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
can someone guide me?

<!-- 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"  <span>230</span>>
             
           
      </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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.43

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

Link to the challenge:

2

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!

3

i dont understand i did what i know
can u guide me?

4

What error message do you see? What part of the instructions would you like explained more?

5

span one
i did right then also it showing wrong

6
  1. Your second opening div doesn’t have a closing angle bracket
  2. The directions tell you to add the span after the the div and not inside of it. Look for the closing div of .left-container and then add the span tags.
7

I’m not sure what 'span one’s means…

You can’t put a tag inside of a tag like this

8 
<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>
9

But where is that span supposed to go? It should not be inside of the legt-container element.

10

got it

<div class="calories-info">
      <div class="left-container">
       
        <h2 class="bold small-text">Amount per serving</h2>
         <p>Calories</p>
      </div>
      <span>230</span>
    </div>
2 Likes
11 
   ssssssssssssssssssssssss                                                             
   thanks for you time
12

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