Learn Typography by Building a Nutrition Label - Step 31

For some reason the website isn’t allowing me to pass this step even though I did everything right? It tells me to put a .small-text selector with a 0.85rem font-size in CSS, which I did, but the error message keeps saying that a need a .small-text selector. I’m wondering if there’s an error on the website.

Can you share your code please? It will be easier to help if you do.
Press CTRL+e and then paste your code.

here’s my code:
.small-text {
font-size: 0.85rem;

Sorry, I meant all of your code. If you have failed to submit the correct code three times, a help icon appears, which allows you to create a forum post containing your code and a link to the challenge.

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

  <div class="label">
      <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>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
/* 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;

/* User Editable Region */

  border: 0; 
  .small-text {
  font-size: 0.85rem;

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

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

Link to the challenge:

Ah yes, I see your problem. You entered the .small-text code correctly, but you accidentally altered the code above in the process.

1 Like

It appears you tried to nest your new class in an existing class declaration. Just reset the step and put the new class below the existing class declaration.

It worked! Thank you so much for your help