---
id: 61b093429e7fc020b43b1bb6
title: Step 71
challengeType: 0
dashedName: step-71
---

# --description--

Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right.

Add a new `div` with the class `cap` before the sleeve `div` element.

# --hints--

Your new `div` element should be within the red marker `div`.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
redMarkerChildren.forEach(child => {
  assert.strictEqual(child?.localName, 'div')
})
assert.lengthOf(redMarkerChildren, 2);
```

Your new `div` element should have a class of `cap`.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert.isTrue(redMarkerChildren.some(child => child?.classList?.contains('cap')));
```

Your cap `div` should be before the sleeve `div`.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
const cap = document.querySelector('div.cap');
const sleeve = document.querySelector('div.sleeve');
assert.isBelow(redMarkerChildren.indexOf(cap), redMarkerChildren.indexOf(sleeve));
```

# --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 Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      --fcc-editable-region--
      <div class="marker red">
        <div class="sleeve"></div>
      </div>
      --fcc-editable-region--
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
