Learn Basic CSS by Building a Cafe Menu - Step 40

HTML-CSS
1

Tell us what’s happening:
What does this mean i should use backspace to move p elements closer on editor?
Which editor are they talking about?

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

<!-- 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: 50%;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

Can be give you idea how to fix not want to give answer
editor can be one using to type html in freecodecamp website should be at line 18 now in editor
there is some space on the right of price in preview if some space is between the p elements can show on computer screen here it can put to put the p elements of the good html you wrote next to eachother instead of extra lines
Try and put flavor of drink and price of drink on same line you can just put your cursor pointer before second p element and keep pressing button delete until both paragraphs made are next to eachother hope this can be some help to get better view try use fullscreen on the webpage so you can have html and preview thank you take care gn gm fren

1 Like