# Learn Typography by Building a Nutrition Label - Step 43

**URL:** <https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491>\
**Category:** Curriculum Help\
**Created:** [March 22, 2024, 4:55pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491 "2024-03-22T16:55:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Markie](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Markie](https://forum.freecodecamp.org/u/Markie)\
**Post date:** [March 22, 2024, 4:55pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/1 "2024-03-22T16:55:46Z")

</div>

I have put the code in as instructed but i am still getting the error "Your p tag should contain the following text Total Fat 8g 10%.

```html
<!-- 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">% Daily Value *</p>
    </div>
 <div class="divider"></div>
 <p>
  <span>
    <span class="bold">
      Total Fat
      </span>
      8g</span>
      <span class="bold">
        10%
        </span>
 </p>     
      

<!-- User Editable Region -->

  </div>
</body>
</html>

```

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

```

### Your browser information:

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

### Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-43)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![Ayak22](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayak22/32/357288_2.png) [@Ayak22](https://forum.freecodecamp.org/u/Ayak22)\
**Post date:** [March 22, 2024, 5:12pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/2 "2024-03-22T17:12:09Z")

</div>

Could it help to keep the p tag and all the span tags on one line, rather than spacing them out? Looking at my code, I think that’s the main difference.

---

<div class="post-metadata">

**Author:** ![Ayak22](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayak22/32/357288_2.png) [@Ayak22](https://forum.freecodecamp.org/u/Ayak22)\
**Post date:** [March 22, 2024, 5:16pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/3 "2024-03-22T17:16:16Z")

</div>

My code:

**Mod edit solution code removed**

---

<div class="post-metadata">

**Author:** ![Markie](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Markie](https://forum.freecodecamp.org/u/Markie)\
**Post date:** [March 22, 2024, 5:43pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/4 "2024-03-22T17:43:16Z")

</div>

hi thanks for the help but i still don’t seem to come right, I have done it exactly the same way you have now and still get the same error

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 22, 2024, 6:44pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/5 "2024-03-22T18:44:52Z")

</div>

@Ayak22

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

---

<div class="post-metadata">

**Author:** ![Ayak22](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayak22/32/357288_2.png) [@Ayak22](https://forum.freecodecamp.org/u/Ayak22)\
**Post date:** [March 22, 2024, 8:33pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/6 "2024-03-22T20:33:42Z")

</div>

Thanks - I appreciate the feedback.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [September 21, 2024, 8:33am UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-43/681491/7 "2024-09-21T08:33:42Z")

</div>

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