Cafe Menu CSS Not Working

HTML-CSS
1

Hello, can someone tell me why this code doesn’t display the price on the far right?
I know there are better ways to write it in CSS but for now I’m just following the course, trying to apply the tools they gave and I just want to understand why the price shows on the left when I did this on Visual Studio to practice (works on freeCodecamp preview and it’s the same code). Thank you so much!

CSS Code:

body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
text-align: center;
}
.menu {
background-color: burlywood;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.item p{
display: inline-block;
}
.flavour {
text-align: left;
width: 50;
}
.price {
text-align: right;
width: 50;
}

HTML Code:

Presentation1
Presentation11920×1080 174 KB

2

Hi there,

The prolem is the width of .flavour and .price

50 what?
Is it 50px or 50%?

The width is invalid, so .flavour and .price width will be their content’s width.
That’s why you can’t see the text inside .flavour is right align.

A tip to debug your code:

Set outline for the element to see its width and height. For example:

.price {
    outline: 1px red solid;
{

For the next time, you can post your code by put your code between 2 line of ``` (3 back ticks) (the back tick key is usually right under the Esc key on your keyboard), like this:

```
# your code here
```

or you can use the Preformatted Text button (the one with </> icon) (or press Ctrl + E):

2 Likes
3

It worked thanks alot! I should’ve specified the width to be 50% for each. Thanks for the tip on how to post the code in here as well!

2 Likes