CSS (Building a Cafe Menu) Step 44

HTML-CSS
1

Hi, I’m on Step 44 of FreeCodeCamp’s Build a Cafe Menu. I’m stuck on the part where I’m supposed to add .price and .flavor under the CSS tab.
I keep getting an error message that says “you need 5 .price elements.”

HTML:

Cafe Menu

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

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

2

Hey.
Can you post your actual code here? Both the CSS and HTML.

1 Like
3

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
5

It seems to me that you accidentally messed up with the number of price elements you should have. Also yeah, you should try to post your code so that others can see where you went wrong and provide help, cheers!

1 Like
6 
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>
          <article class="item">
            <p class= "flavor">Caramel Macchiato</p><p>3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p>3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p>4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

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%;
}
1 Like
8

“To complete the styling, add the applicable class names flavor → and price ← to all the remaining p elements.”

I don’t see where you added the class name price to the p elements with the price in them.

1 Like
9

Thank you so much, this was the answer!

10

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