Learn Typography by Building a Nutrition Label - Step 48

Tell us what’s happening:
Anyone who understand may be could help me?
(the last code of my CSS)

Test

Sorry, your code does not pass. Hang in there.

Hint

You should not have a .daily-value p selector.

  **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 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>
  </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;
}

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

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

.daily-value p:not(.no-divider) {
color: red;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.63

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

Link to the challenge:

What specifically about the instructions or hints is confusing you?

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

I was edit my post to make it clear, maybe you can help me. thx

Hey, I was edit my post. I think it was clear enough. Let me know if you can help me. thx

Hey!
Whenever you’re stuck on a problem , your first reaction should be to take a look at the instructions that you’ve been given to make sure you’re doing exactly what the challenge asks you to do.

After you’ve done that, the next place you should be looking at is the hints and this is the hint that shows up when i run your code.

image

The reason for the bug in your code is that instead of changing the existing selector, you added a new .daily-value p:not(.no-divider) which is causing the error, you need to change the properties of the existing selector and remove the extras.

Hope this helps! :smile:

but when I change it, this would appereance :frowning:

Test

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

Hint

You should have a .daily-value p:not(.no-divider) selector.

what did you change in your code?

There should be 1 daily value which is hinted after the compilation of code .
Secondly , you use the same property which is given to you at the starting of the test which is border-bottom.
Hope this helps you .