Step 44: Build Nutritional Label: After Applying these rules: 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, to this html code below; it still do not parse successfully. i dont know whats wrong, please assist to review and guide.
<!-- 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>
<!-- User Editable Region -->
<div class="divider"></div>
<p>
<span class="bold">Total Fat</span>8g<span class="bold right">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;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0
Build a Nutritional Label - Step 44
There is nothing wrong with your code. The only thing you need to do is wrap <span class="bold">Total Fat</span>8g in a span element. I know it’s a bit confusing but try it again.
Please can you assist to nest it and drop the html code here, let me see. i have done it multiple times.
I can’t just give the answer straight up. But try what I said, wrap <span class="bold">Total Fat</span>8g and only this in a span element
LrdCaptainHelmer:
Total Fat 8g
Here, i have done that, it still not parsing:
Total Fat 8g
10%
Don’t wrap the entire statement. Just wrap until the 8g
Take your time and separate the code.
Total Fat
8g
10%
Take your time to notice what content is not wrapped in a span element.
Carefully read the task at hand.
“8g” must be wrapped along with “Total fat” which is already wrapped.
See below, its still not parsing :
Total Fat 8g
10%
Alright. Let’s break it down.
You have the first span element: <span class="bold">Total Fat</span>
You have the text: 8g
Then you have the second span: <span class="bold right">10%</span>
What you need to do is wrap the first span and the text in a <span> element
1 Like
than ks so much, it has parsed successfully. thank you
You’re welcome. Glad I could be of help
Hello, please review this code:
Nutrition 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 no-divider">% Daily Value \*</p>
<div class="divider"></div>
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
<div class="divider"></div>
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
<p class="indent no-divider">Dietary Fiber 4g</p>
<div class="divider"></div>
<p class="indent no-divider">Total Sugars 12g</p>
<div class="divider double-indent"></div>
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
<div class="divider"></div>
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
<div class="divider large"></div>
<p>Vitamin D 2mcg <span>10%</span></p>
<p>Calcium 260mg <span>20%</span></p>
<p>Iron 8mg <span>45%</span></p>
<p class="no-divider">Potassium 235mg <span>6%</span></p>
</div>
<p class="note">
\* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet.
2,000 calories a day is used for general nutrition advice.
</p>
and assist. This is **Step 66**
Add a medium divider after your .daily-value element. Below that new divider, create a p element with the class attribute set to note.
Give the p element the following text:
Example Code
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
index.html
49
50
51
52
53
54
55
Check Your Code
Navigated to Step 66
It’s better if you created a new post. It’s better than doing here.
i was going to lose my mind over this one. No structural error, it was just extra spaces or the lack of it. It’s an easy step.