Learn Typography by Building a Nutrition Label - Step 22

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

<!-- User Editable Region -->

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

<!-- User Editable Region -->

/* file: styles.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f5f6f7;

.label {
  max-width: 300px;
  margin: 0 auto;
  padding: 32px;
  background-color: #fff;
  text-align: center;
  border-bottom: 4px solid #fdb347;

.bold {
  font-weight: 800;

.divider {
  height: 1px;
  margin: 12px 0;
  background-color: #ccc;

span {
  letter-spacing: 1px;

Your browser information:

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

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

Link to the challenge:

You added a colon here. I don’t think you were asked to do that.

Be sure to only do what the instructions ask and no more. Making even the smallest unexpected change can cause the tests to fail.

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