Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

I don’t know what I am doing wrong

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

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

Link to the challenge:

2

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 .

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

Your p element is incorrect. There should be no space after the word ‘Calories’ and the closing tag is invalid syntax.

‘below the .left-container element’ means after the closing tag of the element, not directly after its opening tag, otherwise you’re nesting the span element inside the .left-container element. Also, you have unnecessary spaces inside your span tag.

3

Hi good morning what am I doing wrong? My eyes are get glazed over.

4

Could you take a look at what i have done lately and tell me what’s wrong?

5

You havent shared any new code here so no one can see what you have done lately

6

Can’t you guys just look at what’s going on in the courses?

7

No. You need to share your code

8

It looks like this <div class="divider"></div><p><span> <span class="bold">Total Fat</span> <span class="bold">10%</span><span>Total Fat 8g 10%</span></p>

9

It translated my code

10

how do I fix that? Please

11

The code you posted is not for this challenge

12

Hello @Biff ,
After read your issue, I must tell you that comment posted by @igorgetmeabrain is good described and detailed.

I put you some tips that probably will make more clear and you can go ahead with the exercise. :slight_smile:

1. The <p></p> element which includes “Calories” has spaces. Remove them because they are in the paragraph element <p></p> and also in the word “Calories”

2. Your <span> element should be out of the "left-container" class. As the ennounce describes in the exercise Also below the .left-container element, create a new span element with the text 230.

So your <span></span> element should be written immediately after the closing tag </div> in your "left-container" class.

This is how you are seeing right now in the console:
Screen1

And this is how your code should looks like after make the changes that I comment you:
Screen2

Hope that my explanation will be helpful :slight_smile:

13

It’s just not doing it for me mister Cody. div class=“daily-value small-text”>

% Daily Value *


Total Fat10%Total Fat 8g 10%


14

as I said, the code you need help with is not the code for this challenge. The only thing you should be asking for help on this topic is code with step 33 not anything else. As you can see you are still getting replies for this challenge, and you are asking about code that does not have to do with this challenge. This will confuse people.

Questions about code should only be about this challenge

I am closing this topic as it seems you are further ahead of this challenge. If you havent actually passed this challenge then let me know and I can re open it