Learn Basic CSS by Building a Cafe Menu - Step 43

Tell us what’s happening:

How can I implement the code according to these instructions?

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 43

This is from the instruction: Step 43. Next, position the other p elements to be on the same line with no space between them."

Hi
Remember the following text:

The task simply requires you to position your first and second paragraph elements so that they are on the same line.

I recommend resetting the lesson to restore the original code that you deleted, and then implementing the change I suggested.

2 Likes

Thank you for your response. have a nice day

You’re welcome. Did it work?

yap work it, thankyou bro

first of all understand the question’s which is required for the execution. if we have to remove all space between first para and second para then we will make position in one line except first section. (which is not editable also.)

1 Like