Learn Basic CSS by Building a Cafe Menu - Step 42

There are just 5 elements under .item class, but it is showing there should be only 5 elements I am not allowed to move further step stuck with this step after many attempts. Can I know what’s going wrong with this.
Describe your issue in detail here.

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> 

<!-- User Editable Region -->

               
          <article><p class="flavor">Caramel Macchiato</p><p>3.75</p></article>
          <article><p class="flavor">Pumpkin Spice</p><p>3.50</p></article>
          <article><p class="flavor">Hazelnut</p><p>4.00</p></article>
          <article><p class="flavor">Mocha</p><p>4.50</p></article>

<!-- User Editable Region -->

        </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 {
  text-align: left;
  width: 50%;
}

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

Your browser information:

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

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

Link to the challenge:

try to add class tribute to item to each article i think i.e that was ur mistake wish u good coding

1 Like

The error message may be misleading but you haven’t followed the instructions for this step:

Start by adding the class item to the other article elements.

If you add the specified class attribute to the four article elements above, your code will pass.

2 Likes

thank you!
But I am not able to move forward even after many attempts and modifications I could not be able to figure out what’s going wrong.

Could you share your most recent code please? The code you shared above does not have the class attributes as specified in the challenge instructions.

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

<!-- User Editable Region -->

          <article>
            <p class="flavor">Caramel Macchiato</p>
            <p class="price">3.75</p>
          </article>
          <article>
            <p class="flavor">Pumpkin Spice</p>
            <p class="price">3.50</p>
          </article>
          <article>
            <p class="flavor">Hazelnut</p>
            <p class="price">4.00</p>
          </article>
          <article>
            <p class="flavor">Mocha</p>
            <p class="price">4.50</p>
          </article>

<!-- User Editable Region -->

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

Here is my updated code…
I could not be able to analyze what’s going wrong with the code.

You have not added the class attribute to the article elements, as per the challenge instructions. (Check my original reply).

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