Learn Typography by Building a Nutrition Label - Step 43

Stuck with the three spans
Hello Everyone

i’m having a problem with this code with the three spans
i’ve wrote them as requested but still giving me an error message
i’ve tried refreshing and incognito mode

Can you check it and give me any recommmends ?
And thank you in advance .

<!-- 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">
<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/109.0.0.0 Safari/537.36

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

Link to the challenge:

You are soooo close. You are missing a space somewhere. Look at the preview pane. Do you notice that some of the text is too close together?

Yess you’re right, the 8g is too close to the total fat as it shouldn’t they should be in alignment but how to fix this? what am i missing in my code?

Correct, that is where the problem is. What would you normally do to put a space between two words?

i tried giving space by some properties in CSS but none of them worked
and typing space between the element didn’t work.
I’m sorry but i still don’t get it

That’s the way to do it. You would need to show us exactly what you did by pasting your updated HTML in here. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

This is what i did to give a space between the 8g and the total fat
In HTML:
<p><span><span class="bold">Total Fat</span><span class="grams"> 8g</span></span><span class="bold">10%</span></p>
In CSS:
.grams { justify-content: space-between; }
but with no result.

You can forget about the CSS. You do not need it to pass this step. You have added an extra span.

<span class="grams"> 8g</span>

The instructions didn’t ask for this one. Remove it and you should be good.

I did and i remove the extra step in the CSS too
it became like this:
<p><span><span class="bold">Total Fat </span> 8g</span><span class="bold">10%</span></p>
but still not passing .

I finally solved it , it’s never with the spans but the place of the p element should be after the div not in it :laughing: .
Thank you so much Sir for your effort , i really appreciated

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