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

Confused here. Plz help?

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>
      </div>
      <div class="marker">
      </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/113.0.0.0 Safari/537.36

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

Link to the challenge:

Restart step.

The instruction: " In the container div , add two more div elements and give them each a class of marker"

In other words, you have to add two more div elements with the same class as the first one, shown here, and already given in the challenge:

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

‘div’ element has both, the opening <div> and the closing </div> tags. The ‘class’ attribute always goes into the opening tag. Here the class is called “marker”.

You don’t want to nest the new divs inside of each other. They should both be completely separate just like the original div you added in the previous lesson.

Thank you both, but it keeps showing that my new div elements should be within the div with the class container, or it shows my second div element should have a closing tag.Here’s my code :pray: :pray: :pray: :pray:

This is not your code, it just links to the challenge. You need to use format button that looks like </> and paste your code between the lines

Oh, ok, thanks :pray: :pray: :pray:

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

My code. Plz what’s my error? :pleading_face: :pleading_face: :pleading_face: :pleading_face: :pleading_face: :face_holding_back_tears: :face_holding_back_tears:

Same thing as last time. You are nesting the new divs instead of putting them one after the other.

I would restart the step to get the original HTML back. You should see:

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

You see how there is already one .marker div inside of the .container div? You just want to add two more .marker divs. But don’t nest them. Add them one after the other. So after you are through, you should have three .marker divs inside of the .container div.

Thanks, but I still don’t understand how it should be nested in the container without removing the closing bracket. Anyways, thanks a bunch for trying to explain it all to me.

Look again at what you already have:

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

The .marker div is nested within the .container div. It has both an opening and closing div tag within the .contaner div. That means it is completely nested within the .container div. You just need to add two more .marker divs inside the .container div.

1 Like