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

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


<!-- User Editable Region -->

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



</body>
</html>

<!-- User Editable Region -->

/* 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/118.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 22

1 Like

You only need to wrap the text “2/3 cup (55g)” inside a span element.

2 Likes

This one gave me a bit of trouble too. It helps to imagine in your head or type the entire sentence out as if you were in MS Word or something so you visually keep track of where your spaces are actually supposed to be… without the html elements… then wrap only what you are supposed to wrap with your span elements… keeping your spaces as they should be at the same time. A little lengthy but it helped me figure it out.