Learn Basic CSS by Building a Cafe Menu - Step 55

Tell us what’s happening:
Describe your issue in detail here.
Is there anything like padding-property??
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>
          <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>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.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;
  padding-property: 20px;
}


.item p {
  display: inline-block;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

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

Your browser information:

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

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

Link to the challenge:

‘.menu’ is a selector,
‘padding’ is a property,
‘20px’ is the value of the property:

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-property: 20px; -------"padding" is the property!
}```

But If you think about different padding properties in sense of the side to wich you want to apply 'padding', there are four in this step:
padding-left: value;
padding-right: value;
padding-top: value;
padding-bottom: value;
2 Likes

I literally have no idea on what you just said.

Oh i think i understand what you just said. i’ll try and get back to you

It worked. Thanks a bunch

1 Like

Whilst you can apply padding individually to top, bottom etc (e.g. padding-top: 10px), it’s useful also to understand the shorthand:

// applies padding clockwise from top (top, right, bottom, left)
padding: 0 1px 2px 3px;

// applies padding 0 to top and bottom and 10px to right and left
padding: 0 10px;

// applies 10px to all
padding: 10px;
2 Likes

this got me really confused… so do i delete all of the padding and just add padding property? cuz i did that and nothing worked.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

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