Learn CSS Colors by Building a Set of Colored Markers - 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.

not understanding why this wont pass

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

Challenge Information:

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

Hello, I’m noticing you may have deleted or added the surrounding divs to the new div elements. Add two closing divs at the end and it’ll work.

So delete the closing divs in the middle and add 2 at the end? so 3 closing divs at the end? doesnt work still

you need to have 3 sibling div inside #container, from the code you posted at the beginning you are missing a >

missing that where? in the beginning?

here you are missing a >

nope still doesnt’ work. Can someone just tell me what to do before i quit this?

can you show your code?
you have not told us if you moved the three div inside the .container

how do i show it everytime i copy paste it shows something weird

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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

you still have a missing > in your opening <div> tag

also the .marker elements should be siblings, the last two are nested into each other, move one of the closing </div> immediately after the second opening tag <div class="marker">

alright i quit this is bs

for the .marker elements you need to have an opening tag followed by a closing tag, if you have multiple opening tags after each other, they are not siblings anymore

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

Hi @artitus1

I edited your code for readibility.

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

You need to add one more closing div tag to close the parent div, this needs to go at the end of your code.

Happy coding

god bless you i was actually losing my mind

1 Like