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

Tell us what’s happening:

Describe your issue in detail here.

Hi there, really struggling with this step:

Step 14

Now that you’ve got one marker centered with color, it’s time to add the other markers.

In the container div, add two more div elements and give them each a class of marker.

I’ve tried all sorts of different combinations like adding

Can’t seem to get it to work. What am i doing wrong? The thing that’s confusing me is adding the extra div elements to the container div…

I’m getting various errors back mainly about closing tags for the relevant div elements but can’t work it out.

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

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

Challenge Information:

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

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

Welcome to the community @Stib !

Thank you for posting the code, and adding the problem with the code.

Below is the code provided at the beginning of this step.

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

And, this is your current code below.

Do you notice the difference between how the <div class="marker"> </div> in the provided code is nested within the <div class="container"> </div> compared to how it is in your provided code.

It is possible to copy and paste the first marker two more times within the container code to have the total of three as necessary.

I hope this helps you!

1 Like

thanks so much, appreciate that, think it was the “adding it within the container div” that threw me off.

1 Like

You are very welcome!

I think you are probably correct about what caused the confusion.

As long as you are able to resolve it and move on in your coding journey, that is good.