How does it suppose to beee? im cryinnn

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<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" ><div class="container"><div class="container">
    <div class="marker"><div class="marker"><div claa="marker">
    </div></div></div>
  </div></div></div>
</body>
</html>
/* file: styles.css */
h1 {
text-align: center;
}

.marker {
width: 200px;
height: 25px;
background-color: red;
margin: auto;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 14

Link to the challenge:

There are a couple of mistakes here: first off, you don’t need three div elements with a class of container, so remove two of them (and their corresponding closing tags). also, there is a typo right here:

with that there, it won’t work.

lastly, right now, your markers are within each other. for the code to pass, you have to add the closing tags right after your openings, like this:

<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>

in the end, it should be like this:

<div class="container">
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
</div>

This steps need only two more div with a class of marker.

<div class="container" >
    <div class="marker">
    </div>
   <div class="marker">
   </div>
   <div class="marker">
    </div>
</div>