Learn Typography by Building a Nutrition Label - Step 52

HTML-CSS
1

Tell us what’s happening:
I know I’m supposed to wrap “Trans Fat 0g” in a span element to fix the alignment, but why does it need a span element to fix the alignment when the line above it, “Saturated Fat 1g” aligns just fine without being wrapped in a span element?

Your code so far

/* file: index.Ext.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>
    <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"><i>Trans</i> Fat 0g</p>
    </div>    
  </div>
</body>
</html>

/* file: styles.Ext.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 mobile information:

SM-G960U - Android 10 - Android SDK 29

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

Link to the challenge:

2

Hello there @CyrustheVyrus please stay with the lesson. All the lessons in freeCodeCamp are designed and maintained by expert who have efficiency in their work.

Initially it may look like something you won’t expect but as you progress in the challenge/lesson you will see everything is getting aligned perfectly.

Regarding your question: It is a standard practice to keep your code likewise and clean. In this case, let’s say you applied <span> to 4 element out of 5. So it will be hard to describe why you haven’t applied <span> to that one element. Plus it has use of it.

DON’T THINK THAT THEY HAVE ADDED SOMETHING WHICH HAS NO USE IN THE LESSON. Thanks,

1 Like
3

you did not use the <i> on the line above, so the text stayed together. In this line you added <i> around Trans, so that has become a separated entity, look at the preview: you need the span to put together again Trans Fat 0g to align it all to the left

1 Like