# Learn Typography by Building a Nutrition Label - Step 44

**URL:** <https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081>\
**Category:** Curriculum Help\
**Created:** [January 21, 2025, 9:43am UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081 "2025-01-21T09:43:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![harsh6969](https://avatars.discourse-cdn.com/v4/letter/h/b2d939/32.png) [@harsh6969](https://forum.freecodecamp.org/u/harsh6969)\
**Post date:** [January 21, 2025, 9:43am UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081/1 "2025-01-21T09:43:38Z")

</div>

### Tell us what’s happening:

trying to solve this, plz help to identify what’s the erorr

### Your code so far

```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>
    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>

<!-- User Editable Region -->

      <p><span> <span <span class="bold">Total Fat</span> 8g</span><span class="bold">10%</span></p>

<!-- User Editable Region -->

    </div>
  </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/131.0.0.0 Safari/537.36`

### Challenge Information:

Learn Typography by Building a Nutrition Label - Step 44

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

---

<div class="post-metadata">

**Author:** ![bochard](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bochard/32/394870_2.png) [@bochard](https://forum.freecodecamp.org/u/bochard)\
**Post date:** [January 21, 2025, 9:47am UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081/2 "2025-01-21T09:47:47Z")

</div>

Hi @harsh6969,

> [@harsh6969](#):
>
> `<p><span> <span <span class="bold">Total Fat</span> 8g</span><span class="bold">10%</span></p>`

you have an extra `span` tag before the `span class="bold"`, remove it.

---

<div class="post-metadata">

**Author:** ![thegeniussupreme](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/thegeniussupreme/32/383844_2.png) [@thegeniussupreme](https://forum.freecodecamp.org/u/thegeniussupreme)\
**Post date:** [January 28, 2025, 5:47pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081/3 "2025-01-28T17:47:14Z")

</div>

Total Fat 8g10%

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 29, 2025, 2:01pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081/4 "2025-01-29T14:01:04Z")

</div>

hi @thegeniussupreme

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. [How to Help Someone with Their Code Using the Socratic Method](https://www.freecodecamp.org/news/how-to-help-someone-with-their-code-using-the-socratic-method/)

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:** ![thegeniussupreme](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/thegeniussupreme/32/383844_2.png) [@thegeniussupreme](https://forum.freecodecamp.org/u/thegeniussupreme)\
**Post date:** [January 30, 2025, 10:00pm UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081/5 "2025-01-30T22:00:01Z")

</div>

I’m sorry for my mistake, I didn’t know, as soon as I can read the article you shared with me, see you soon and thank you

---

<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:** [August 1, 2025, 10:00am UTC](https://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-44/731081/6 "2025-08-01T10:00:11Z")

</div>

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