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

HTML-CSS
1

Tell us what’s happening:

I have tried all of the ways I know how to get this to work, it keeps telling me that either i am not including opening tags for me new div or closing tags, i add and it still doesnt work and it also tells me that i then am not putting the second divs WITHIN the container div. please help! and please dumb it down for me haha

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/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

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

2

Welcome to the forum @tabythajo

Try placing the closing div tag after the opening one.

Happy coding

3

the three markers should not be nested between each other, they should be siblings

4

what do you mean by that? ive tried to code it a couple different ways but it either says i need to put the 2 new divs within the container div which to me would be <div class=“container”, div class"marker"> and so on but that doesnt work either

5

If we format the elements properly we can see it better:

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

we can see that the opening tag of the second .marker is before the closing tag of the first .marker, so that means that the second .marker is inside the first one. They should be all siblings, at the same level, not inside each other.

6

I know my formatting needs work :sweat_smile:
So I did exactly what you have here and when i check code, it tells me “Your new div elements should be within the div with the class container .”

7

It’s exactly the same thing you have written with proper indentation, it’s not different code, to show that they are one inside the other. you need to still fix it

8

Oh, i see. Your comment was to make note of the format of my code. Thank you.

Do you by chance know what I am doing wrong to get past this section? I dont understand what it means that it wants me to put the new div elements within the container div, ive tried it a couple different ways and its not pushing through to the next section.

9

do you understand what it means that you put the .markers one inside the other and not as siblings?

10

I did not understand the verbiage, no. But I was able to figure it out, between you reformatting it and i just tried to recode a couple different ways and I got it down.

thanks for your help!