Learn Typography by Building a Nutrition Label - Step 54

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

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

  <div class="label">
      <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>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
    <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 class"bold"> <span>Sodium </span>160mg </span> <span class="bold"> 7%</span></p>


<!-- User Editable Region -->

/* 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

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

Link to the challenge:

Screenshot 2023-04-22 at 14.38.14
here is what i did but i am still getting errors

You didnt need to create a new post…I have told you what needed to be done in the other post. In this example you added the {“ “}

Can I ask you why you added that?

Alright i understand may yiu at least post the solution please for the sake of me progressing because i am really stuck here

We dont give out full solutions on the forum. Can you share with me tour latest code if you made any changes, and I can see if I can come up with an example that will help.

sure let me show you the latest code
here you go

So, let me try breaking it down for you. So, the first part of the challenge says
" Wrap the text Sodium in a span element with a class attribute set to bold"

Here we are putting that first span around sodium. See how the span ends right after sodium? This makes sure that sodium is the only thing in this span. (I changed the other text as to not give away everything)

`<p><span class="bold">Sodium</span> 560mg 10000% </p>`

The next step says:
" Wrap the 7% text in another span element with the class set to bold"
Here we put the percentage in its own span like we did with the sodium above. This span still has the same class of bold as sodium does. (As you can see I changed the sodium text in this example, as again a way of not giving the entire solution)

`<p><span class="bold">Beef JErky</span> 560mg <span class="bold">10000%</span></p>

Lastly, and I think this is the part that has been causing you the most issues is:
" Also add an additional span element around Sodium 160mg for aligning it correctly."
So here we want one span around both beef jerky and the 560mg. Or in your case the sodium and 160mg. The span will start right after the <p> and it will end right after the 560mg or the 160mg for you. Note this span does not contain any class. I have started this span, it is now up to you to finish it

`<p><span><span class="bold">Beef JErky</span> 560mg <span class="bold">10000%</span></p>

Well i really appreciate it ,thanks a lot for the explanation for this and for breaking it down to the smallest points
i appreciate for shading the light

No worries, nesting things like this can be a bit of pain and the are sometimes hard to see. Just takes some time practicing with this stuff, and it will be easier for you to spot. Keep it going!


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