--- id: 5f3c866dd0d0275f01d4d847 title: Part 40 challengeType: 0 dashedName: part-40 --- # --description-- Well that did not work. Styling the `p` elements as `inline-block` and placing them on a separate lines in the code, creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p`'s width a little less than `50%`. Change the `width` value to `49%` for each class to see what happens. # --hints-- Test 1 ```js ``` # --seed-- ## --seed-contents-- ```html Camper Cafe Menu

CAMPER CAFE

Est. 2020

Coffees

French Vanilla

3.00

Carmel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

``` ```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-- ```