Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

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

31

32

33

<span

10%</

p>

Step 43

After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Wrap the text Total Fat in a span element with the class of bold. Wrap the text 10% in another span element with the class of bold. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

Check Your Code

Test

Sorry, your code does not pass. You’re getting there.

Hint

One span element should wrap the text I have done what was the wrong ? .It say wrap Total Fat in firt span element that have been done.
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>

<!-- User Editable Region -->

    <div class="divider medium"></div>    <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</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 (Linux; Android 6.0; BGO-DL09) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Mobile Safari/537.36

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

Link to the challenge:

2

hi there, did you have a question?

3

% Daily Value *

Total Fat 8g <span 10%

This is my solution but,hint comment is wrap Total Fat in the span element of p,that is what already done above tha code, what is the wrog ? And explain the word or give hint how I create alignment span element ? it may be understanding problem
4

You have an extra space inside the span that belongs -outside- it
Remove the space after Fat and place it after the closing tag of span here

They didn’t ask you to wrap 8g in a span by itself.
They asked you to wrap the previous span above with 8g in another span (nesting them both at the same time in the same span)

This is invalid. Delete it.

Move this line so it is on the same line as the previous span and make sure there is one space between them.

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

   <span class=" bold">10%</span></p> 
Still it says

/ running tests
One span element should wrap the text total fat. Explain the sentence in briefly ,if you can . Thanks to all

6

You haven’t removed the space to the right of fat as suggested so you continue to get an error.

7

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