Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
It’s saying one span element should wrap the text Total Fat
Describe your issue in detail here.
I have no idea why this isn’t working as it seems to display correctly on the side. I didn’t try shift+f5 to refresh and using an incognito browser from previous topics. Any help or suggestions would be really appreciated. <3
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 class="bold">Total Fat</span><span class="bold">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/114.0.0.0 Safari/537.36 Edg/114.0.1823.37

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

Link to the challenge:

2

Welcome to our community!

  • Delete the span tags around “8g”
  • Surround the text “Total Fat” with its span tags and “8g”, in another pair of span tags
  • Make a blank space between “Total Fat” and “8g”, as well as between “8g” and “10%”
3

Oh wow. Thank you so much for your incredibly fast response to my question. You’re a godsend. I still feel as though I am misunderstanding the whole concept here.

<div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> <span class="bold">8g</span> <span class="bold">10%</span></p>
    </div>

Thank you for the welcome too! I am pleasantly surprised and enjoying my experience thus far!

4
  • Delete the span tags that surround the “8g”
  • Now, the following part of code should be surrounded with 'span tags:
<span class="bold">Total Fat</span> 8g
5

Holy. I want to swear but I’ll be polite haha! That actually worked! I see nesting the span tags around that code did actually arrange it to the left. Is that to stop it from being taken to the right?

Thank you so much. You made my day.

1 Like