--- id: 5f3ef6e03d719d5ac4738993 title: Part 58 challengeType: 0 dashedName: part-58 --- # --description-- The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. # --hints-- Test 1 ```js ``` # --seed-- ## --seed-contents-- ```html Camper Cafe Menu ``` ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); } h1, h2, p { text-align: center; } --fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; padding: 20px; } --fcc-editable-region-- .item p { display: inline-block; } .flavor, .dessert { text-align: left; width: 75%; } .price { text-align: right; width: 25% } ```