In the nutrition label project, you’re directed to make the body of the nutrition label, and in step 46, you make a CSS property
.daily-value p {
border-bottom: 1px solid #888989;
}
To more efficiently list the values and apply a divider.
Later, we need to indent the specific values, but the lesson tells you to make a class.
.indent {
margin-left: 1em;
}
This then presents the problem of the previous bottom border no longer reaching the left side of the label. And the lesson addresses that by making a .no-divider class to remove the label and has you make a divider yourself with
<div class="divider"</div>
Naturally, I thought this was kind of dumb, so instead, I propose that the lesson should go into letting the student try to use information from past lessons to problem solve.
I thought of instead changing the .indent class to change the padding.
.indent {
padding-left: 1em;
}
then removing all the <div class="divider></div> and .no-divider, since it’s not needed.
Edit: I know that changing this like so would leave the “% Daily Value *” hanging with only a partial border; I fixed it by applying a style to the <p> element of “width: 100%; text-align: right;” and, leaving the “right” in the class because removing it would cause more issues.