Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
I cannot see the error. I have placed the new p element after the last divider but still error. I guess error is within the p element. I have nested 3 span elements at places I believe to be correct. But the error says " Your new p element should have the text Total Fat 8g 10%". Please help me.

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

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

Your browser information:

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

Challenge: Learn Typography by Building a Nutrition Label - Step 43

Link to the challenge:

2

I think it’s issue with spaces, more than anything. like, tasks are sometimes annoyingly asking for precise spacing. so dont have empty space wherever it’s not needed.

3

hai… does anyone happen like this? at this step also?
You should create a new p element at the end of your .daily-value element.
i dont understand why this appear after follow all the instructions at 43 step?

4

Please do not use another person’s post for your issue.

Please use the Help that appears after three unsuccessful attempts on any step?

image

By using this option, you can provide the current code for the step, along with your question. This will allow the community to respond to your concerns in a direct, focused and to offer proper guidance to help you succeed.

Happy coding! :slight_smile:

5

Hello!
As suggested, spaces may be the issue. If you have not solved this step, yet, I suggest resetting and try to not add additional space to the step.
If there is still an issue, I would suggest checking to see if any browser extensions may be causing the issue. You could submit from a different browser.

But, first the space mentioned in the previous post appears to be the main issue.

Happy coding! :slight_smile:

6

I have tried removing unnecessary spaces but no help.

7

Hi everyone. Thank you so much for helping. The issue was resolved by a capital F in “Total Fat”. So much fuss over a little thing :grimacing:

8

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