Learn Typography by Building a Nutrition Label - Step 55

Tell us what’s happening:
It says 5. A span element should wrap the text Sodium I believe I have already done this with Sodium I have looked over my code at least 4 times and I have not seen anything so(unless I’m blind) I believe I am missing something and I would like someone to point me in the correct direction and not just give me the answer unless I have a typo​:sob::sob:I looked through other posts about this lesson but I think they are of an older version

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 no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
      <p><span><span class="bold">Sodium </span> 160mg</span><span class="bold">7%</span>
    </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;
}

.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; rv:130.0) Gecko/20100101 Firefox/130.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 55

I just realized I hadn’t closed the p tag but I’m still getting the same problem

Sodium 160mg7%

This is how your code displays.
Is it supposed to be this way or should there be exactly one space between each word?
(btw, there are two spaces between Sodium and 160mg also in addition to the missing spaces)

1 Like

Yeah I noticed those as well and I tried changing them in different orders and im still receiving the error i have reset and rewritten the code 3 times now so im not sure

you just have to fix the spaces. That means remove the extra ones (the one to the immediate right of Sodium is extra, and add the missing ones, like the one immediately to the right of the closing span tag for 160mg

1 Like

I understand and I have already done that
<p><span><span class="bold">Sodium </span>160mg </span> <span class="bold">7%</span></p>
It still gives me the same error

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

this is still not correct because you have an extra space to the immediate right of Sodium and a missing space to the immediate left of 160mg and an extra space to the immediate right of mg.

1 Like

there is supposed to be a space right after sodium or else it would appear Sodium160mg there is no need for a space after 160mg because the css aligns it the to end with flex-end

I see what you mean you want a space before 160 and no space after sodium

it worked thank you very much the last lesson I put a space after Cholesterol rather than before 0mg so thats confusing but thank you thank you thank you

no problem. The trick here is to write the given text first with the correct spacing, then add the tags so they are ‘tight’ around each word (no spaces inside the tags) while maintaining the spaces as you add the tags.

1 Like