# Learn Basic CSS by Building a Cafe Menu - Step 54

**URL:** <https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-54/642679>\
**Category:** Curriculum Help\
**Created:** [October 5, 2023, 3:08pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-54/642679 "2023-10-05T15:08:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ZanotisShadow](https://avatars.discourse-cdn.com/v4/letter/z/ecccb3/32.png) [@ZanotisShadow](https://forum.freecodecamp.org/u/ZanotisShadow)\
**Post date:** [October 5, 2023, 3:08pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-54/642679/1 "2023-10-05T15:08:03Z")

</div>

Please tell me what i need to do

**Your code so far**

```html
/* file: index.Ext.html */
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-left: 20px;
  padding-right: 20px;
}

.item p {
  display: inline-block;
}

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

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

```

```css
/* file: styles.Ext.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-left: 20px;
  padding-right: 20px;
}

.item p {
  display: inline-block;
}

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

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

```

**Your mobile information:**

```txt
9013X_EEA - Android 10 - Android SDK 29

```

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

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-54)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![dotty.dev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dotty.dev/32/336517_2.png) [@dotty.dev](https://forum.freecodecamp.org/u/dotty.dev)\
**Post date:** [October 5, 2023, 3:14pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-54/642679/2 "2023-10-05T15:14:25Z")

</div>

You already got `padding-left` and `padding-right`, the step states the following:

> Now try to add the same `20px` padding to the top and bottom of the menu.

So you are required to add `padding-top` and `padding-bottom` both with `20px` as the value.

---

<div class="post-metadata">

**Author:** ![ZanotisShadow](https://avatars.discourse-cdn.com/v4/letter/z/ecccb3/32.png) [@ZanotisShadow](https://forum.freecodecamp.org/u/ZanotisShadow)\
**Post date:** [October 6, 2023, 12:17pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-54/642679/3 "2023-10-06T12:17:08Z")

</div>

So this is what i have to do thank you for the information

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [April 6, 2024, 12:17am UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-54/642679/4 "2024-04-06T00:17:39Z")

</div>

Closed on April 6, 2024, 12:17am UTC

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