---
id: 68ef0b3237fef991c92d9c19
title: Step 4
challengeType: 0
dashedName: step-4
---

# --description--

Now add a `div` element with the class `flex-container` below your `header`. Then create six `div` elements with the class `box` inside the `div` you just created.

Remember that a class attribute is often used to point to a class name in a style sheet. In this case, all of the `div` elements will be styled equally according to the `.flex-container` and `.box` style definition.

# --hints--

You should have a `div` element below the `header` element.

```js
const divELBelowHeader = document.querySelector('header + div');
assert.exists(divELBelowHeader);
```

Your `div` element below the `header` element should have the class `flex-container`.

```js
const divELBelowHeader = document.querySelector('header + div');
assert.equal(divELBelowHeader.className, 'flex-container');
```

You should have six `div` elements nested inside the `.flex-container` element.

```js
const divElsInsideContainer = document.querySelectorAll('div.flex-container > div');
assert.lengthOf(divElsInsideContainer, 6);
```

All six of your `div` elements inside of the `.flex-container` element should have the class `box`.

```js
const divElsInsideContainerWithBox = document.querySelectorAll('div.flex-container > div.box');
assert.lengthOf(divElsInsideContainerWithBox, 6);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Colored Boxes</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1>Colored Boxes Layout</h1>
  </header>
--fcc-editable-region--
  
--fcc-editable-region--
</body>
</html>
```

```css
h1 {
  text-align: center;
  margin-bottom: 10px;
}

```
