Daily value p issue

HTML-CSS
1

hi. okay doing the step 62. have googled and tried several variations of my code. but keeps telling me to add the p values for the protein at the end of the daily value. which i have. so why is it telling me.
can you help me out to get it to pass.
what am i doing wrong as a screen reader user. yes, reset the lesson a few times.
so trying my best.
so, how to get it to pass.
will paste the error, link to the step and my html code.
marvin.
ps: pasting below.

You should create a new p and div element at the end of your .daily-value element.

https://www.freecodecamp.org/learn/full-stack-developer/workshop-nutritional-label/step-62

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>
<div class="daily-value small-text">
  <p class="no-divider">
  <span><span class="bold">Protein</span> 3g</span>
</p>
<div class="divider"></div>
  <p class="indent no-divider">Total Sugars 12g</p>
<div class="divider"></div>
<p class="double-indent no-divider">
  Includes 10g Added Sugars <span class="bold">20%</span>
</p>
<div class="divider"></div>
<p class="no-divider">
  <span><span class="bold">Protein</span> 3g</span>
</p>
<div class="divider"></div>
<div class="divider large"></div>
  </div>
  </div>
<div class="divider"></div>
  <p class="no-divider bold right">% Daily Value *</p>
  <div class="divider"></div>
  <p>
    <span class="bold">Total Fat</span> 8g <span class="bold">10%</span>
  </p>
  <p class="indent bold 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"></div>
<div class=" divider double-indent"></div>
</div>   
    </div>
  </div>
</body>
</html>
2

you have duplicated code, you should really reset the step and start from correct code

3

hi. okay reset the step and then tried to type in the code. but it still is not passing. so what am i doing wrong.
dont think i have duplicated code.
can you help me out and tell me what i am doing wrong.
so then can then get it to pass. using a screen reader jaws 2025.
marvin.
ps: so pasting the error and my code below.
please advice me how to fix. did reset the lesson, then copied it from the editor to my local copy.
then tried to put the code just below the daily value at the end of the element.
if not got that right, then let me know.
pasting below.

Your new p element should have the text Protein 3g .
.


<!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>
    <div class="daily-value small-text">
            <p class="no-border">
  <span>
    <span class="bold">Protein</span> 3g
  </span>
</p>
      <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>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
    </div>
  </div>
</body>
</html>
type or paste code here
<!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>
    <div class="daily-value small-text">
            <p class="no-border">
  <span>
    <span class="bold">Protein</span> 3g
  </span>
</p>
      <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>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
    </div>
  </div>
</body>
</html>
4

did you paste the code twice or do you still have duplicated code?

you are not putting the Protein p element at the end of the div

5

hi, did try putting it at the end of the div for the value small text. is that where i put it. and no duplicated code.
at the bottom, after the last div divider. so will paste the error and my code. so what am i doing wrong?
where to place the text exactly, as totally blind and using a screen reader.
so tell me where to place it in the correct place. as totally blind.
and frustrated.
tell me where to put it.
sorry.
need your sighted help.
marvin.
ps: pasting the error below and my code. and i dont think i have it duplicated.
will go and search in visual studio.
back in a minute.
You should create a new p and div element at the end of your .daily-value element.


<!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>
    <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>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
      <p class="no-border">
  <span>
    <span class="bold">Protein</span> 3g
  </span>
</p>
    </div>
  </div>
</body>
</html>
6

this steps asks for a p followed by a div, you need to create two elements

then, no-border is not a class that exists in this project, that is not the correct class to use. You need to give the correct class to the p element and to the div element you have not yet created

7

hi. so should i then delete all the class no-border. is that what you are saying. and also what text to put in the p class. is it the indent class. and where to put it.
please advice.
as cannot see. just to let me know what to put and where to put it. do i put it below the last divider div just before the end of the body.
please advice.
a bit confused.
marvin.

8

if you read the instructions it tells you what class to use for the p element, and also for the div element that goes immediately after the p element

if you put the new div after the existing divider div, where does the p element go?

9

hi. got it at last. took a few more tries and then looking at other peoples code to get an idea. had the spans all wrong and not nested correctly. so got it. sorry for bothering you. should have figured that out. but hey just a blind person using a screen reader, not feeling that great, a whole lot better and getting over covid. thanks for your help. a great community.
marvin.