Learn Basic CSS by Building a Cafe Menu - Step 41

HTML-CSS
1

Tell us what’s happening:
this is an objective in this step but I don’t get it

Step 41

That worked, but there is still a little space on the right of the price.
You could keep trying various percentages for the widths. Instead, simply move the price p element to be on the same line and make sure there is no space between them.

I really don’t understand the question
what exactly does it want me to do?

  **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="">French Vanilla</p>
          <p class="">  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.5%;
}

  **Your browser information:**

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

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

Link to the challenge:

2

“…simply move the price p element to be on the same line and make sure there is no space between them.”

Literally use the back space key on your keyboard to put the “3.00” p element on the same line as the “French Vanilla” p element.

Also, you don’t want to add spaces before/after “3.00” inside the p element.

3

Thank you for your answer :ok_hand: but this step and its solution are weird and not applicable in real project

4

I agree, it is kind of a weird step, but there are a few instances where spaces and newlines actually affect the display of the HTML, so it is actually applicable in the real world.

Let me be clear, I’m not saying the method used here is the method I would use. Just that there are actually instances where a newline in your HTML can cause things to display funny and getting rid of them can fix that problem.

5

Yeah I agree, especially knowing where spaces and newlines really affect

6

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