Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
how to nest the the text “8g” to the text “Total Fat” for alignment?

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 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

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

Link to the challenge:

2

You don’t nest text inside of text. You nest things inside of elements.

Look at each sentence one at a time

  1. After your last .divider element, create a p element and give it the text Total Fat 8g 10%.

  2. Wrap the text Total Fat in a span element with the class of bold.

  3. Wrap the text 10% in another span element with the class of bold.

  4. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

I would do each sentence one at a time.

1 Like
3

i tried it but it didn’t work. what can I do now??

4

Did your code change?

What does your code look like with only the first sentence accomplished?

5

Screenshot 2023-05-26 6.42.56 PM
Screenshot 2023-05-26 6.42.56 PM795×357 31.5 KB

6

Please post actual code instead of screenshots.

So far, so good, what’s the next sentence look like?

Step 2 or Step 4 is usually where trouble happens.

7

Total Fat 8g 10%

. after doing this, they tell me that my p element should have three span elements. what may I do next?
8

Lemme see the actual code.

9

<p><b>Total Fat</b>8g<b>10%</b>

10

Hello!
Please could you post the updated code, along with your question(s) so we will be able to better assist you. Without seeing the completely updated code, we are not able to see if there is a problem, or how to assist you.
Thank you, and happy coding.

11

You need to use span elements instead of b

1 Like
12

this correct reponse

Mod edit: removed code

13

I have removed the code from your post. While the code you shared was not correct to pass the challenge we ask that you do not give users code. Instead focus on giving them hints, and pointing them in the right direction. Just not giving them code so they can figure the answer out for themselves

Thanks

1 Like
14 
<p><span class="bold">Total Fat</span>8g<span class="bold">10%</span>
15

You deleted all the spaces between words. You need those

1 Like
16

Total Fat 8g 10%

this is the actual code

Blockquote