Learn Typography by Building a Nutrition Label - Step 48

Tell us what’s happening:

Challenge is:

Step 48

The bottom borders under your % Daily Value * and Saturated Fat 1g 5% elements do not extend the full width of the label. Add no-divider to the class for these two elements.

The hint for this is:

Test

Sorry, your code does not pass. Don’t give up.

Hint

Your p element with the text Saturated Fat 1g 5% should have no-divider added to the class attribute. Do not remove the existing classes.

So, what is wrong now, i really do not understand. Both

elements have the no-divider class and i did not delete the existing classes.

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, 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>

<!-- 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;
}

.indent {
  margin-left: 1em;
}

.daily-value p {
  border-bottom: 1px solid #888989;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/112.0

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

Link to the challenge:

Here you didn’t put a comma between ‘bold’ and ‘right’ but you put a comma after ‘right’. I suspect this is a problem.

Thank you for the hint, but the program says the problem is in the line with the indent class.

Did you try fixing that typo in both places?

there is no typo?

i mean, “bold right” is a pre setup information and when i type “bold right, no-divider” the system checks it out as ok.

But when i comes to the p-class for the mentioned text with saturated fat, the p-class- element: indent, then there is no way to pass this lection. in other words:

is ok < p class="indent, no-divider" > isnt ok. Why?

You keep putting a comma in there. That comma is a typo. It shouldn’t be there. You didn’t use it the last time you specified multiple classes.

a sry, now i understand. i works :slight_smile:

1 Like

Because you should not have a comma between the classes. If you want to use multiple classes it would just be

<p class1 class2> text </p>

As Jeremy was suggesting you do is get rid of the comma in both the places

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