Where is my mistake? Cafe menu step 76

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<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" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p class="established">Est. 2020</p>
    </header>
    <hr>
    <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>
        <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>
    <hr>
    <footer>
      <p>
        <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
      </p>
      <p>123 Free Code Camp Drive</p>
    </footer>
  </div>
</body>
<html>
/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}

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

hr {
height: 2px;
background-color: brown;
border-color: brown;
.bottom-line {
bottom-line: 25px;
}

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

.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}

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

Challenge: Step 76

Link to the challenge:

The step said: " Add some more space by creating a class named bottom-line using 25px for the margin-top property."

So you need to create a ned class in your css called “bottom-line”

How to create a class in css?

.className{
    propperties: atributes;
}
.bottom-line {
  margin-top: 25px;
}

thank you so much. i understand that, but the system keeps saying that my code is wrong and says, “You should add a .bottom-line selector.”

have any idea?

Did you paste that in your css code?

It should be work!. Try refresh the page and doing it again

yes! i’ve been doing that since yesterday and i keep getting the same response so i’m a little bit confused :frowning:

i’ve tried refreshing the page several times and it keeps saying the same error.

Here is the issue!!!

Look the open and close tags for each element { }

hr{
   stuff:stuff;
}
.bottom-line{
   stuff: stuff;
}
1 Like

OH MY GOD I DIDN’T NOTICE THAT!!!

thank you so much!!! :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: