Learn Basic CSS by Building a Cafe Menu - Step 41

HTML-CSS
1

Tell us what’s happening:
I have absolutely no idea what they mean by this?

Put your P elements on one line and make sure there is no space between them?

Does it mean the first two? Just the french Vanilla and 300?

Or does it mean all of them?

It’s only my second day - i’m really enjoying this but this has got me STUMPED

please help I would really appreciate it

  **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">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article class="item">
          
          <p class="flavor">French Vanilla</p>
          <p class="price">300</p>
        </article>
        <article>
          <p>Caramel Macchiato</p>
          <p></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: right;
width: 49%;
}

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

2

This step only wants you to move one p element, the price below “French Vanilla”. It literally wants you to use the back space key on your keyboard to move the price p element so it is on the same line as the “French Vanilla” p element.

3

wow that simple! Thankyou so much

4

I thought they meant in the preview window - @bbsmooth you’re a gentleman

5

Ya, this is a bit of a weird step, since most steps ask you to add or change HTML/CSS and this one is just moving an element up one line. It’s sort of out of character.

6

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