---
id: 5d822fd413a79914d39e98dd
title: Step 21
challengeType: 0
dashedName: step-21
---
# --description--
I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
# --hints--
You should add two new `div` elements before the `.bb1` element.
```js
const bBuildings = document.querySelector('.background-buildings')?.children;
assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
```
You should add one new `div` element between the `.bb3` and `.bb4` element.
```js
assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
```
You should add two new `div` elements after the `.bb4` element.
```js
const bb4 = document.querySelector('.bb4');
assert.exists(bb4?.nextElementSibling);
assert.exists(bb4?.nextElementSibling?.nextElementSibling);
```
You should add 5 new `div` elements.
```js
assert.equal(document.querySelectorAll('div')?.length, 14);
```
# --seed--
## --seed-contents--
```html
City Skyline
--fcc-editable-region--