Learn Basic CSS by Building a Cafe Menu - Step 51

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Hello!

I am stuck at step 51 that I am asked to add class .dessert after class .flavor.

Below is how my code looks like, there is no space between the two class and I couldn’t pass this step. Could anyone help with this?

Thanks!

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

Your code so far

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

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


.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/108.0.0.0 Safari/537.36

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 51

Link to the challenge:

2

Use a comma to target two things at the same time.

So add a comma after .flavor and then add the next class etc

3

Hi thanks for the reply!
I did it a few times but still not get passed for this step, it reminds me all the time that " You should add the .dessert selector to your .flavor selector."

I coded like below,

.flavor.dessert {

4

did you try using a comma as I suggested?

5

Yes I did but still not able to pass

6

What is your updated code?

7

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

8

So you did not try using a comma? Try that

9

I tried the below and failed.

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

10

this is because you deleted the dot for dessert.
you need the comma and the dot

11

Now we are making progress

This doesn’t select the dessert class. The period is mandatory for selecting a class. The comma for selecting two ‘things’.

12

Aha, Ok now I get it! Thanks so much!

13

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