Learn Basic CSS by Building a Cafe Menu - Step 63

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Step 63
Add a footer element below the main element, where you can add some additional information.
I think I have the Footer element where it has to be, but I cant just make it pass.

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

<!-- User Editable Region -->

      <main>
        <footer>
        <h1>CAMPER CAFE</h1>
        <p class="established">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>
          <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>
      </footer>

<!-- User Editable Region -->

    </div>
  </body>
</html>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

h1, h2 {
  font-family: Impact, serif;
}

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

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

Link to the challenge:

2

You nested the footer element within the main element. You want to add it below, or after the main element.

3

can you give me some example? thanks.

4

You already have many examples in your HTML of adding an element below, or after another element.

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

Here you added one article element below another article element.

5

(post deleted by author)

6

Well, this article element:

Caramel Macchiato

3.75

is the same as:

CAMPER CAFE

…what am I doing wront then?

7

What you are doing wrong is that instead of adding the footer element below (or after) the main element you have nested the footer element inside of the main element. Are you familiar with the term nested? I think it has been used quite a bit in the steps so I’m assuming you know what it means. If not, it means to put within, or to put inside of. So you have added the footer element inside of the main element instead of after it.

8

…can you see the coding?

9

OK so I read the instructions again, and what you said about nesting, and BINGO, suddlenly I knew what to do,
OK it´s done, finally.
Thank you very much!