Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:

What am I doing wrong? I checked everywhere for this issue

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/122.0.0.0 Safari/537.36 OPR/108.0.0.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

Look at the Preview window on the right, your text currently is Total Fat8g.
The text should be Total Fat 8g.
You’re missing an empty space between Total Fat and 8g.

Try deleting the space in-front of the first p Element and also add a space between the first and second span element then add a space in-front and before of 8g

still doesn’t work

    <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>

and how do I do that ?

There needs to be a space between “Total Fat” and “8g”, currently there is not. Try adding the space either after “Total Fat” or before “8g”, it should accept one of those if not either.

  • Add a space between <span class="bold">Total Fat</span> and 8g

  • Remove the space between the last </span> and </p>

still doesn’t work

<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>

The problem here is when wrapping the text inside span element, you wrapped additional spaces with the text.

Now reset your code and try it again.
This time:

  • Don’t add space before or after <span> and </span> tags.

  • When wrapping the text inside span element, don’t wrapped additional spaces with the text.

Let’s do this step by step, shall we?
Mod edit: removed

so it was just spaces, I always get a problem with spaces, how do I fix it and know how to space my code?

Here are few things I can think of:

  • Make it a habit to not typing extra spaces before and after HTML tags

  • Use the tab key to indent your code instead of using space key

  • After writing your code, check the page in the browser to see if the page looks as intended

@toan

It is great that you solved the challenge, but instead of posting your full working solution, or writing code for them. 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.

1 Like