---
id: 61b093429e7fc020b43b1bb6
title: Paso 76
challengeType: 0
dashedName: step-76
---

# --description--

Su manga se ve bien, pero se vería aún mejor si se colocara más hacia el lado derecho del marcador. Una forma de hacerlo es agregar otro elemento antes de la manga para empujarla hacia la derecha.

Agregue un nuevo `div` con la clase `cap` antes del elemento de manga `div`.

# --hints--

Su nuevo elemento `div` debe estar dentro del marcador rojo `div`.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2);
```

Su nuevo elemento `div` debe tener una clase de `cap`.

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

Tu tapa `div` debe estar antes de la manga `div`.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
const cap = document.querySelector('div.cap');
const sleeve = document.querySelector('div.sleeve');
assert(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%));
}

```
