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

HTML-CSS
1

Tell us what’s happening:
I’ve tried just about every iteration of this that I can think of, where am I going wrong? Thanks

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

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

Link to the challenge:

2

What you have here is a ‘marker’ div inside a ‘marker’ div inside a ‘marker’ div inside a ‘container’ div. You’ve nested them all within each other. You should have three ‘marker’ div elements nested separately within the ‘container’ div.
To achieve this, all you need do is add a ‘marker’ div opening tag, followed immediately by its closing tag. Then follow it with two more ‘marker’ div elements.

3

This didn’t seem to work either?

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

I’ve marked up your code so that you can see more clearly how your opening and closing tags pair up. Only one of your ‘marker’ div elements is nested inside the container div. You should move that ‘container’ div closing tag to the bottom so that the other two ‘marker’ div elements are also nested inside the ‘container’.

Untitled

5

Thanks so much for your patience and taking the time to help me better understand! I’ve been stuck here for days and I finally understand! Thank you so much