--- id: 5f46e36e745ead58487aabf2 title: Step 87 challengeType: 0 dashedName: step-87 --- # --description-- Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property. # --hints-- You should add an `.address` selector. ```js const hasAddress = new __helpers.CSSHelp(document).getStyle('.address'); assert(hasAddress); ``` You should set the `margin-bottom` property to `5px`. ```js const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); assert(hasMarginBottom); ``` Your `.address` selector should have the `margin-bottom` property set to `5px`. ```js const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom'); assert(addressMarginBottom === '5px'); ``` # --seed-- ## --seed-contents-- ```html Cafe Menu ``` ```css body { background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } h1 { font-size: 40px; margin-top: 0; margin-bottom: 15px; } h2 { font-size: 30px; } .established { font-style: italic; } h1, h2, p { text-align: center; } .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; padding: 20px; max-width: 500px; } hr { height: 2px; background-color: brown; border-color: brown; } .bottom-line { margin-top: 25px; } h1, h2 { font-family: Impact, serif; } .item p { display: inline-block; margin-top: 5px; margin-bottom: 5px; font-size: 18px; } .flavor, .dessert { text-align: left; width: 75%; } .price { text-align: right; width: 25% } /* FOOTER */ footer { font-size: 14px; } --fcc-editable-region-- --fcc-editable-region-- a { color: black; } a:visited { color: black; } a:hover { color: brown; } a:active { color: brown; } ```