Learn Typography by Building a Nutrition Label - Step 44

HTML-CSS
1

Tell us what’s happening:

Sorry, your code does not pass. Hang in there.

You should have a span element around the code Total Fat 8g.

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>
    <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>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>

<!-- User Editable Region -->

    <p>
  <span class="bold">
    <span>Total Fat 8g</span>
  </span> 
  <span class="bold">10%</span>
</p>


<!-- User Editable Region -->

    </div>
  </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;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 44

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

This is the question Step 44

Notice how the text 8g appears centered in the preview. Nest the span element containing the text Total Fat along with the text 8g, in an additional span element for alignment.

4

I know what the question says. I don’t know how you are stuck

5

It can help to keep this all on one line to more clearly see the spacing. It’s hard to see if you have any spaces between words here.

6

there is a problem with your span class= and span again
So you opened your second span directly and used span /span twice for the same content

7

This is my answer

 <p>
  <span class="bold"><span>Total Fat</span> 8g</span> 
  <span class="bold">10%</span>
</p>
8

Why is it giving me that error

9

Lebohang, you opened the span (on the html file) and you opened the second span directly after. So you did the same thing twice.

10

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

11

‘’‘

Total Fat 8g 10%

’‘’, This is my code it keeps giving me the same error though , ’ Sorry, your code does not pass. Don’t give up.

You should have a span element around the code <span class="bold">Total Fat</span> 8g."

12

That’s not what I see in the html file.
In the html file you use the span element twice on the same content like this.
<span><span>content</span></span> so that’s twice a span for one content item.
remove the first "span class=“bold” and the second “slash span”

btw: you’re using forward ticks, the button besides should be the back ticks.

13

I’m struggling with this one, gosh , I dont know what to do now :frowning_face:

14

I tried this ```

Total Fat 8g 10%

‘’', still giving me the same error, gosh this is tiring

15

You are giving this

<!-- remove both span element parts I marked as wrong -->
<span class="bold">
    <span> <!--  this span is wrong  -->Total Fat<!-- put a /span here> 8g</span><!-- this </span> is wrong -->
  </span> 
  <span class="bold">10%</span>

Mod Edit: SOLUTION REMOVED

This is the right code, check it with what you typed word for word.

16

okay, I made a mistake.
You don’t remove the first "span class=“bold” but remove the one directly behind it.

It seems class=“bold” is necessary.

17

Like this right ? ```


Total Fat 8g
10%

```
18

no, I made a mistake while explaining as I didn’t know the question.

Mod Edit: SOLUTION REMOVED

This is the right code. Please check it word for word. You’ll see the mistakes.

19

Well thank you , but i’m still getting the same errror :slightly_frowning_face:

20

use your 3 back ticks on a new line when you use them and put your code on here. I know it’s tedious but we’ll get there. Check whether your code shows up in your message, otherwise it’s really difficult as I always have to inspect your code throug other means.

<span class="bold"> try it out, you can edit your message if necessary.

I just see why you get a mistake. I’m quite rusty and made another mistake. Just a minute.