Build a Nutritional Label - Step 22

HTML-CSS
1

Tell us what’s happening:

It says that my p element should still have the text “Serving size 2/3 cup (55g)”

My code

Serving size 2/3 cup (55g)

should be working… I’m not understanding the issue. The results in the Nutrition Facts label says “Serving size 2/3 cup (55g)”

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

<!-- User Editable Region -->

  </head>
  <body>
    <div class="label">
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      8 servings per container
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>

<!-- 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;
}

h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Challenge Information:

Build a Nutritional Label - Step 22
https://www.freecodecamp.org/learn/full-stack-developer/workshop-nutritional-label/step-22

2

Your solution works from my end. Reset the step and try again as you may have deleted some of the other seed code. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

Hey drsprad95, I feel your frustration—sometimes these challenges can be super picky! Your code looks correct to me with the

element having the exact text “Serving size 2/3 cup (55g)”. Like a1legalfreelance suggested, it might be a glitch or some hidden issue with the browser. Have you tried resetting the step and pasting your code again after a CTRL + F5 refresh? Or maybe switching to incognito mode? Let us know if that fixes it or if you’re still stuck!