--- id: 5f47633757ae3469f2d33d2e title: Part 46 challengeType: 0 dashedName: part-46 --- # --description-- If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`. # --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; } .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; } .item p { display: inline-block; } --fcc-editable-region-- .flavor { text-align: left; width: 50%; } .price { text-align: right; width: 50%; } --fcc-editable-region-- ```