--- id: 5f3ef6e01f288a026d709587 title: Step 67 challengeType: 0 dashedName: step-67 --- # --description-- You can use an `hr` element to display a divider between sections of different content. First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing. # --hints-- You should add an `hr` element. `hr` elements are self-closing. ```js assert(code.match(//i)); assert(!code.match(/<\/hr>/i)); ``` You should not change your existing `header` element. ```js assert($('header').length === 1); ``` You should not change your exiting `main` element. ```js assert($('main').length === 1); ``` Your `hr` element should be between your `header` element and your `main` element. ```js assert($('hr')[0].previousElementSibling.tagName === 'HEADER'); assert($('hr')[0].nextElementSibling.tagName === 'MAIN'); ``` # --seed-- ## --seed-contents-- ```html Cafe Menu
--fcc-editable-region--

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

Desserts

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

Cinnamon Roll

2.50

--fcc-editable-region--
``` ```css body { background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } h1 { font-size: 40px; } 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; } h1, h2 { font-family: Impact, serif; } .item p { display: inline-block; } .flavor, .dessert { text-align: left; width: 75%; } .price { text-align: right; width: 25% } ```