Learning basic CSS by building Cafe Menu step 52 still not working (after make alike as other coder)

<!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">
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <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>

// —css style sheet----

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

}

hi, I have edited your post to allow others to read your code.
Please enclose code inside of a code block (it is the menu icon that looks like this </>)

1 Like

Hi @dngooddeals

Since you want to apply the style inside .item you should target both flavor AND dessert.

Your code here means that you are targeting an element that have a class of both “flavor” and “dessert” such that the class attribute of said element is like this:

< ... class="flavor dessert"> ... </ ... >

However the question wants you to target class of “flavor” AND “dessert”. You have done targeting multiple elements in your second CSS rule which targets h1, h2, and p

I agree that the wording on the question is a bit confusing.

Hope that helps.

2 Likes

[Mod edit: solution removed]
its the damn comma

2 Likes

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

seperate both class names with a ‘comma’ to allow the editor to identify that there 2 respective class names

2 Likes

tq for helping me unagi <3

This does not work. rather separate the class selectors with a comma like this:
Mod edit: solution removed

Hello,

I am sure you are only trying to help, but please do it by posting tips and hints rather than solutions to fCC challenges.

Your previous post has been edited to remove the solution.

Thank you for your understanding.