Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Tell us what’s happening:

Please I need help in my code CSS step 52 I don’t know what is wrong with my code

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>

<!-- User Editable Region -->

          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>

<!-- User Editable Region -->

          <article class="item">
            <p class="dessert">Cherry pie</p><p class="price">2.75</p>
          <article/>
          <article class="item">
            <p class="dessert">cheesecake
</p><p class="price">3.00</p>
          <article/>
          <article class="item">
            <p class="dessert">Cinnamon  roll</p><p class="price">2.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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 52

2

Your cheesecake dessert line is split on two lines but should be all together like the other desserts.

3

Hi @Gossytechsolutions .
In your code you close the tags in wrong way so it is showing error.
Here is yours:

       `<article class="item">
          <p class="dessert">Cherry pie</p><p class="price">2.75</p>
      <article/>
      <article class="item">
          <p class="dessert">cheesecake</p><p class="price">3.00</p>
      <article/>
      <article class="item">
          <p class="dessert">Cinnamon  roll</p><p class="price">2.50</p>
      </article>`

Here is correct version:

Mod edit: code removed
I hope you find it well.

4

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.