How do I complete this challenge?

Tell us what’s happening:
Describe your issue in detail here.
I am unable to understand what the question is asking of me here. Please help…

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href=",700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
  <div class="label">
      <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>
    <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 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 class="divider"></div>
      <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
      <div class="divider"></div>
      <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
      <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
      <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
/* 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: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/ Safari/537.36

Challenge: Step 55

Link to the challenge:

hi @vashutangri

Below your last p element, add another p element with the text Dietary Fiber 4g. Give the p element the class necessary to indent it and remove the dividing border. Then create a divider below that p element.

lets break it down into steps:
1-Below your last p element (find the last p element and place our code below it)
now that we are typing below the last p element
2-add another p element (make a new p element with opening and closing tags)
3-with the text Dietary Fiber 4g(put the text : Dietary Fiber 4g ,inside the p element we created)
4- Give the p element the class necessary to indent it (give our new p element a class that will indent it like other similar elements are…look for a class with left-margin or just copy it from similar elements)
5- remove the dividing border (give it a secondary class that removes the border same as process in step 4 but looking for a different class name of course)
6-Then create a divider below that p element.(create a new el with class of divider below our p element)

Please let me know if you need more of an explanation on anything
this should allow you to check off what you have completed and what you don’t

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