Learn Basic CSS by Building a Cafe Menu - Step 41

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
How to use the back space key on keyboard to move the p element with the class price next to the p element with the class flavor

  **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">3.00</p>
        </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 (Windows NT 10.0; Win64; x64) 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

Turn this two line of code into one line by deleting the unnecessary space between them

4

Sometimes it’s better to keep the elements separated so it’s easier to delineate and see what you’re doing.
Especially further on in your courses where you will be adding many other attributes to your elements.

On the Cat project (later on) you will learn how to style it with CSS so the price and the

5

I believe you have done this project too and below is the instruction.

You could keep trying various percentages for the widths. Instead, use the back space key on your keyboard to move the p element with the class price next to the p element with the class flavor so that they are on the same line in the editor. Make sure there is no space between them.

It is unrelated to this step but, of course best practices for further project

6

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