Learn Basic CSS by Building a Cafe Menu - Step 44

HTML-CSS
1

Tell us what’s happening:

I have done everything in this code yet it says this

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

Your .flavor elements should be your p elements with the text French Vanilla, Caramel Macchiato, Pumpkin Spice, Hazelnut, and Mocha.

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'>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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 44

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

It looks like you left French Vanilla outside of the Editeable region. You’re still missing one menu item within the portion of the porblem you type in. Move the French Vanilla within the Editeable region.

4

Hey @padcliff88
The text within the p element with the class of flavor has spaces at the end remove the spaces

Happy coding

1 Like
5

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