Learn Basic CSS by Building a Cafe Menu - Step 44

HTML-CSS
1

Tell us what’s happening:
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 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>

<!-- 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/107.0.0.0 Safari/537.36 Edg/107.0.1418.26

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

Link to the challenge:

Sorry, your code does not pass. Hang in there.

Hint

You should apply the class to your element.item article

2

I have 2 French Vanilla items on menu How do I correct this to pass

3

Hello. You would need to get rid of the vanilla that is immediately above the caramel macchiato. For this challenge you only add to the caramel macchiato, pumpkin spice, hazelnut and mocha elements

4

on Menu not exercise/lesson…when I erased it I don’t pass cause it tells me I need five flavors and prices

5

thanks Cody it worked this time

1 Like
6 
Sorry, your code does not pass. Hang in there.

Hint
You should apply the class to your element.itemarticle
7

something went wrong back to square 1

8

Hello, we will need to see all the updated code so we can check out whats going on

9

thank you I appreciate it

10

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