CSS by Building a Cafe Menu - Step 46

HTML-CSS
1

Tell us what’s happening:
I have tried doing it two ways but both failed and im not confused on what im doing.

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>

<!-- User Editable Region -->

        <section>
          <h2>Coffee</h2>
        <section>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
         </section>
         <section>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
           </section>
        <section>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
       </section>
       <section>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
        </section>
        <section>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
           </section>
        </section>

<!-- User Editable Region -->

      </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: 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 46

Link to the challenge:

2

You appear to have added a bunch of unnecessary <section> elements.
The ‘Coffee’ menu should be contained within a single <section> element.

This challenge requires you to add one additional <section> element (below the existing one), which will be used to contain the next group of ‘Dessert’ items.

3

They both dont work am I missing something?
1)

 <section>
          <h2>Coffee</h2>
                      <section>
             </section>
          <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>
        </section>

 <section>
                      <section>
             </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>
        </section>
4

Why do you have more than one section element here?
Your entire ‘Coffee’ menu should be nested within one single section element.
Then you put one more section element at the bottom of that code block, below the closing tag of that section element.
Your entire ‘Desserts’ menu will be nested inside that section element.

5

ah.

-FILLER-------------------------------------------