Learn Basic CSS by Building a Cafe Menu - Step 38

flavor {
  text-align: left;
  width: 50%
}

.price {
  text-align: right;
  width: 50%

I know how to do the coding but i don’t know why it works the way it does. Can someone please explain to me

Can you explain? What way is it working now and what way do you expect it to work?

Also your flavor is not correct. The way you have it now is telling the css to style a flavor element, but no such thing exists. You either need to add . to make it a class, or a # to make it an id. Those both depend on whats in your html

i dont understand why the width property changes the text location

The challenge explains it a little

This is because inline-block elements only take up the width of their content. To spread them out, add a width property

You have this style in your code

.item p{
  display:inline-block
}

This style makes your flavor and price become inline-block elements. As the description above says these elements will only take up the width of their content. So, if you want to spread them out you add the width. The width increases the space these elements have to take up. So the text location didnt change exactly, it’s just the space the text has to work with increased.