2021-11-03 01:13:47 -07:00
---
id: 615f951dff9317a900ef683f
title: Step 66
challengeType: 0
dashedName: step-66
---
# --description--
Give the `.note` selector a left and right padding of `8px` , removing the top and bottom padding. Also set the `text-indent` property to `-8px` .
With these last changes, your nutrition label is complete!
# --hints--
Your `.note` selector should have a `padding` property set to `0 8px` .
```js
2021-12-22 16:16:59 +00:00
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
2021-11-03 01:13:47 -07:00
```
Your `.note` selector should have a `text-indent` property set to `-8px` .
```js
assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
```
# --seed--
## --seed-contents--
```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 class = "right" > 2/3 cup (55g)< / span > < / p >
< / header >
< div class = "divider lg" > < / div >
< div class = "calories-info" >
< p class = "bold sm-text" > Amount per serving< / p >
< h1 > Calories < span class = "right" > 230< / span > < / h1 >
< / div >
< div class = "divider md" > < / div >
< div class = "daily-value sm-text" >
< p class = "right bold no-divider" > % Daily Value *< / p >
< div class = "divider" > < / div >
< p > < span class = "bold" > Total Fat< / span > 8g < span class = "bold right" > 10%< / span > < / p >
< p class = "indent no-divider" > Saturated Fat 1g < span class = "bold right" > 5%< / span > < / p >
< div class = "divider" > < / div >
< p class = "indent no-divider" > < i > Trans< / i > Fat 0g< / p >
< div class = "divider" > < / div >
< p > < span class = "bold" > Cholesterol< / span > 0mg < span class = "right bold" > 0%< / span > < / p >
< p > < span class = "bold" > Sodium< / span > 160mg < span class = "right bold" > 7%< / span > < / p >
< p > < span class = "bold" > Total Carbohydrate< / span > 37g < span class = "right 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 dbl-indent" > < / div >
< p class = "dbl-indent no-divider" > Includes 10g Added Sugars < span class = "right bold" > 20%< / span >
< div class = "divider" > < / div >
< p class = "no-divider" > < span class = "bold" > Protein< / span > 3g< / p >
< div class = "divider lg" > < / div >
< p > Vitamin D 2mcg < span class = "right" > 10%< / span > < / p >
< p > Calcium 260mg < span class = "right" > 20%< / span > < / p >
< p > Iron 8mg < span class = "right" > 45%< / span > < / p >
< p class = "no-divider" > Potassium 235mg < span class = "right" > 6%< / span > < / p >
< / div >
< div class = "divider md" > < / 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 >
< / div >
< / body >
< / html >
```
```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;
}
.divider {
border-bottom: 1px solid #888989 ;
margin: 2px 0;
clear: right;
}
.bold {
font-weight: 800;
}
.right {
float: right;
}
.lg {
height: 10px;
}
.lg, .md {
background-color: black;
border: 0;
}
.md {
height: 5px;
}
.sm-text {
font-size: 0.85rem;
}
.calories-info h1 {
margin: -5px -2px;
overflow: hidden;
}
.calories-info span {
font-size: 1.2em;
margin-top: -7px;
}
.indent {
margin-left: 1em;
}
.dbl-indent {
margin-left: 2em;
}
.daily-value p:not(.no-divider) {
border-bottom: 1px solid #888989 ;
}
--fcc-editable-region--
.note {
font-size: 0.6rem;
margin: 5px 0;
}
--fcc-editable-region--
```
2021-12-21 17:03:09 -06:00
## --solutions--
```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 class = "right" > 2/3 cup (55g)< / span > < / p >
< / header >
< div class = "divider lg" > < / div >
< div class = "calories-info" >
< p class = "bold sm-text" > Amount per serving< / p >
< h1 > Calories < span class = "right" > 230< / span > < / h1 >
< / div >
< div class = "divider md" > < / div >
< div class = "daily-value sm-text" >
< p class = "right bold no-divider" > % Daily Value *< / p >
< div class = "divider" > < / div >
< p > < span class = "bold" > Total Fat< / span > 8g < span class = "bold right" > 10%< / span > < / p >
< p class = "indent no-divider" > Saturated Fat 1g < span class = "bold right" > 5%< / span > < / p >
< div class = "divider" > < / div >
< p class = "indent no-divider" > < i > Trans< / i > Fat 0g< / p >
< div class = "divider" > < / div >
< p > < span class = "bold" > Cholesterol< / span > 0mg < span class = "right bold" > 0%< / span > < / p >
< p > < span class = "bold" > Sodium< / span > 160mg < span class = "right bold" > 7%< / span > < / p >
< p > < span class = "bold" > Total Carbohydrate< / span > 37g < span class = "right 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 dbl-indent" > < / div >
< p class = "dbl-indent no-divider" > Includes 10g Added Sugars < span class = "right bold" > 20%< / span >
< div class = "divider" > < / div >
< p class = "no-divider" > < span class = "bold" > Protein< / span > 3g< / p >
< div class = "divider lg" > < / div >
< p > Vitamin D 2mcg < span class = "right" > 10%< / span > < / p >
< p > Calcium 260mg < span class = "right" > 20%< / span > < / p >
< p > Iron 8mg < span class = "right" > 45%< / span > < / p >
< p class = "no-divider" > Potassium 235mg < span class = "right" > 6%< / span > < / p >
< / div >
< div class = "divider md" > < / 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 >
< / div >
< / body >
< / html >
```
```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;
}
.divider {
border-bottom: 1px solid #888989 ;
margin: 2px 0;
clear: right;
}
.bold {
font-weight: 800;
}
.right {
float: right;
}
.lg {
height: 10px;
}
.lg, .md {
background-color: black;
border: 0;
}
.md {
height: 5px;
}
.sm-text {
font-size: 0.85rem;
}
.calories-info h1 {
margin: -5px -2px;
overflow: hidden;
}
.calories-info span {
font-size: 1.2em;
margin-top: -7px;
}
.indent {
margin-left: 1em;
}
.dbl-indent {
margin-left: 2em;
}
.daily-value p:not(.no-divider) {
border-bottom: 1px solid #888989 ;
}
.note {
font-size: 0.6rem;
margin: 5px 0;
padding: 0 8px;
text-indent: -8px;
}
```
