Learn Typography by Building a Nutrition Label - Step 43 (Could you help to correct on the error step 43 with html tag <p>Total Fat 8g 10%</p>, please?

HTML-CSS
#1

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

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>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> <span>8g</span> <span class="bold">10%</span></p>
    </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;
}

.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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

#2

:balloon: Hi, welcome to the forum!
We see you have posted some code but did you have a question?

#3

Oh, I’m sorry. because it’s the first that I try to challenge on it. On step 43 with html tag

Total Fat 8g 10%

. I try to change many ways but I can’t resolve it. Help me, please? Thank you so much!!!

#4

The instructions can be split into three steps.

Wrap Total Fat in a span element with the class set to bold .

Wrap 10% in another span element with the class set to bold .

Also wrap the words Total Fat 8g in an additional span element for alignment.

You did the first two but not the last one.
You also wrapped the 8g in a span even though they didn’t ask for this.

#5

As be like that:

1

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

2

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

#6

This has the first two spans requested.

Now you need to add the final span around the Total Fat 8g as requested

#7

I’m sorry. Could you give me a full line of code because I am still confused?
I appreciate for your help.

#8

Hi there,

I can’t give you the full answer because that is not allowed in the forum. Instead I can tell you to try to understand the last remaining instruction (add a span around the words Total Fat 8g) and use your intuition to make an educated guess about where to place the span tags.

You can always show me the latest code you tried if you are still stuck.
Remember to add the tags in such a way that the layout looks correct in the preview pane also.

1 Like
#9

I got it, I will be tying again. Big thanks.

1 Like
#10

You got it? I stopped in this step too, i don’t’ know where i have to put the last span element to make works… I tryed many ways, and don’t work

#11

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like
#12

I want to say ‘Thank’ to hbar1st based on he/her mention of some of the steps. I can resolve this problem. Please look at our previous comment. It will help you to finish ‘rrsabbadin’.

1 Like
#14 
type or paste code here
```<p><span class="bold">Total Fat</span>8g<span class="bold">10%</span><span>Total Fat 8g</span></p>
can you tell what is wrong with this line of code please!
#15

You don’t need this part as that is a duplication of the text you wrote already.
Instead make sure that what you wrote on this line has the correct spacing and the correct spans. (Look at the preview pane as you create the line to make sure it looks correct),

If you need more help then open a new topic using the ask for help button which looks like a question mark.