Learn Basic CSS by Building a Cafe Menu - Step 43

Tell us what’s happening:
Describe your issue in detail here.
I don’t understand the instructions on this one. So I haven’t started to code yet.
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>Caramel Macchiato</p>
           <p>3.75</p>
          </article>
          <article class="item">
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article class="item">
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article class="item">
            <p>Mocha</p>
            <p>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/114.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like

You know how you put the two p elements next to each other on the same line back on step 40? You just want to do the same thing to the p elements for the remaining articles.

This is what you did to the first article in step 40:

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

Do you see how the two p elements are next to each other on the same line?

This is what your remaining articles look like:

<article class="item">
  <p>Caramel Macchiato</p>
  <p>3.75</p>
</article>

Do you see how the p elements are on separate lines? You want to put them together on the same line just like you did in step 40.

thank you so much for taking the time to hel me.

1 Like