Learn Basic CSS by Building a Cafe Menu - Step 51

Tell us what’s happening:

I am having issue passing my test for Step51 after declaring the css selectors to reflect like below. I only added .dessert to the existing .flavor selector as displayed below.

Your code so far

My CSS side of the solution looks like this:
.dessert .flavor {
text-align: left;
width: 75%;
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}

/* User Editable Region */

.dessert { text-align: left; width: 75%; } .flavor {
  text-align: left;
  width: 75%; 
}

/* User Editable Region */


.price {
  text-align: right;
  width: 25%
}

Your browser information:

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

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 51

This says “find all elements with a class of flavor that are descendants of an element with a class of dessert”.

You want a select that finds all elements that have either a class of dessert or a class of flavor.

You’ve already done something similar with the h1, h2 and p elements to set the text-align property.

Welcome to the forum @bright_121

I edited your code for readability.
Your code has two selectors, with the same styling properties and values.

The instructions asked you to add another selector, to the existing stylng rule.
Separate each selector using a comma.

Here’s an example from your earlier code:

Happy coding

Thanks so much it works.Just a little mistake has really delayed me.

1 Like