Learn Basic CSS by Building a Cafe Menu - Step 40

HTML-CSS
1

What it is worg what ı must doing

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

<!-- User Editable Region -->

   <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>


<!-- User Editable Region -->

          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </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: 49%;
}

.price {
  text-align: right;
  width: 49%;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/22.0 Chrome/111.0.5563.116 Safari/537.36

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

Link to the challenge:

2

Hello.

Your <p> (Frech Vanilla) and your <p> (3.00) will be in the same line. Remove the spaces.

Grets.

2 Likes
3

Im dorry ı doing but its not will be

4

Do you mean it is still not working?

1 Like
6

Then post your updated code.

7

Screenshot_20230728_202014
Screenshot_20230728_2020141920×962 132 KB

8

Near the place where the text “Step 40” was written, it’s showing a circle with a small tick in it, that means it has been solved.
I don’t think there’s anything wrong.

2 Likes
9

I trying so much it still same ı will try agsin thank you for reply

10

But" chek your code" its not going me to next step

11

Change the alignment to center

12

The instruction says the alignment should be left not center so you’re wrong.
Nice try anyway.

1 Like
13

oh so we should change the alignment of the flavours and price to left and right except the first one, right?

14

If there is something you don’t understand in your code, create a new topic.
It is not good to ask for help in someone else’s topic.

Yes, since that’s what the instruction says, you are to follow the instruction.

2 Likes
15

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