Learn Basic CSS by Building a Cafe Menu - Step 54

HTML-CSS
1

Hello. I am getting an error and I think I have everything right but something seems off.

IMG_0021
IMG_0021750×1334 64.8 KB

Your code so far

/* file: index.Ext.html */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu 
{ padding-left: 20px;}
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
 {padding-right: 20px;}

.item p {
  display: inline-block;
}

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

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

/* file: styles.Ext.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu 
{ padding-left: 20px;}
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 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:

iPhone - iOS16.6

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

Link to the challenge:

2

why do you have som many {}s?

1 Like
3

It was the code I had on the lesson before. Should I delete it all?

4

That all cannot be the code from last lesson - that many {}s is an error in your code.

This is the original code:

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

Only 2 {}

1 Like
5

Ok. Thank you so much.

1 Like
6

Hello. Here is a picture of the actual code.

IMG_0024
IMG_0024750×1334 145 KB

Your code so far

/* file: index.Ext.html */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
  text-align: center;
}
.menu { padding-left: 20px;
}
  width: 80%; 
  background-color: burlywood;
 { padding-right: 20px;
}
.item p {
  display: inline-block;
}
.flavor, .dessert {
  text-align: left;
  width: 75%;
}
.price {
  text-align: right;
  width: 25%
}

/* file: styles.Ext.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
  text-align: center;
}
.menu { padding-left: 20px;
}
  width: 80%; 
  background-color: burlywood;
 { padding-right: 20px;
}
.item p {
  display: inline-block;
}
.flavor, .dessert {
  text-align: left;
  width: 75%;
}
.price {
  text-align: right;
  width: 25%
}

Your mobile information:

iPhone - iOS16.6

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

Link to the challenge:

7

You still have more than one { and more than one } for the .menu CSS rule. Only one of each is permitted

8

this is the answer for this step:

Mod edit: removed solution

9

In Step 54, you’re supposed to have padding-top and padding-bottom properties each with a value of 20px.

You are not supposed to remove the properties present in the CSS selector (.menu), rather you should add the top and bottom padding properties.

1 Like
10

@farahouar

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
11

Ok. Now I understand. I’m going to solve any problems I might have with coding on my own now. Thank you all for your assistance.

12

Not sure what you are referring to but my response was to the person who posted a solution which is not allowed.

13

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