Learn Typography by Building a Nutrition Label - Step 60

Tell us what’s happening:

Describe your issue in detail here.
Even though i have written the code its still showing
" Your new p element should have the text Includes 10g Added Sugars 20%"
problem. Can anyone tell me what am I doing wrong.

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 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>
    </div>
    <p class="double-indent no-indent"> Includes 10g Added Sugars <span class="bold">20%</span></p>

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

.double-indent {
  margin-left: 2em;
}

.daily-value p:not(.no-divider) {
  border-bottom: 1px solid #888989;
}

Your browser information:

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

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 60

I have fixed the “no-indent to no-divider”.

1 Like

Hi
Sorry for that try removing the spacing after the opening angle bracket

<p>Includes

Hope it works!!

2 Likes

Still showing the same problem

1 Like

you are missing the div below it it wants you to put a div with class divider below the p element

1 Like

Still not working. No matter what i do it shows only one problem " Your new p element should have the text Includes 10g Added Sugars 20%" even if I remove span and div element and class attribute it won’t show new problem just the same mentioned above.
I have tried with all elements and attributes it still give the same problem.

he I think I know try removing the space from the Includes 10g Added Sugars to the spane elemetn insted I mean put space b4 20% instead of putting it after Includes 10g Added Sugars that and add that div and add class bold to spand

Includes 10g Added Sugars 20%

this is what I am doing, can you spot anything wrong with it? can you tell me how to copy my code and paste it here.

I don t know how to explain it to you and also I don t think you doing the thing I am telling you to do. Have you removed the space from the end of the text Includes 10g Added Sugars and placed it in the start of the span which says 20% I did the challenge a sec ago I had the same error I did that and It worked

yes i did remove the space end of the “Includes 10g Added Sugars” and placed it at the start of the span.

Can you paste your code here again with these changes. because honestly I don t know why it isn’t working for you

Can you please tell me how to paste my code if i do the copy paste it’s not showing my code.

I think you have to type this ``` at the start let me check

  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

yeah it works and the same and the end of the code so type that “here your code

    <p class="double-indent no-divider">Includes 10g Added Sugars <span 
     class="bold">20%</span> <p>
    <div class="divider"> 

type span space 20% and no space after sugar and delete space between span and closing p and your closing p should have / inside

<p class="double-indent no-divider">Includes 10g Added Sugars<span class="bold"> 20% </span></p>
    <div class="divider">

"still no luck"

it is weird because I literally copied your code pasted it and it worked maybe try to refresh a page and switch add block off sometimes it works or switch it of and the refresh

yes that’s the problem it keep showing I am missing " Includes 10g Added Sugars 20% "
even though i have tried everything.

Kindly add spacing between sugars and the first span tag

tried refreshing 5-6 times