Learn CSS Colors by Building a Set of Colored Markers - Step 14

Tell us what’s happening:

I’m not able to nest within the same div. it says your second new div element doesn’t have open tags. But I have both open tags and close tags. Can somebody help me figure out what shall be done in these cases?

???

Your code so far

<!-- file: index.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>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

  </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/124.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Colors by Building a Set of Colored Markers - Step 14

The structure of nesting elements looks like this. Every part of the nested element goes inside of the opening and closing tags of its parent.

<div class="layer-1">
  <div class="layer-2">
  </div>
</div>

Here’s a bigger example

<div class="layer-1">
  <div class="layer-2">
    <div class="layer-3">
    </div> <!-- closes layer-3 -->
    <div class="layer-3">
      <div class="layer-4">
      </div> <!-- closes layer-4 -->
    </div> <!-- closes layer-3 -->
  </div> <!-- closes layer-2 -->
  <div class="layer-2">
    <div class="layer-3">
    </div> <!-- closes layer-3 -->
  </div> <!-- closes layer-2 -->
</div> <!-- closes layer-1 -->

Edit: I added some comments to help show what each closing tag is associated with

Hello!

It appears the markers are nested within each other, instead of separately.

Example of how they should appear:

<div class ="fruit">
<div class="apple"></div>
<div class="orange"></div>
<div class="kiwi"></div>
</div>

The fruit div is nesting all of the fruit within it. But, they all have both their opening and closing div together. This way, I could place the text between the opening and closing div later on.