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

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Your new div elements should be within the div with the class container .
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>
      <div class="marker">
      <div class="container"> </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/107.0.0.0 Safari/537.36 Edg/107.0.1418.26

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

Link to the challenge:

1 Like
2

this is totally frustrating

3

You need to do three things

  1. get rid of the second div that has the class container thats near the middle of your code
  2. you need to move the closing div tag for the container div at the top to be at the bottom so that all the other divs are inside the container div
  3. you need a closing div for one your divs with the class marker
4

I did that and keep receiving same message. However will go back and re-do it.
Thanks Cody

5

Your first new div element should have a closing tag. t his is what I get when I remove closing tag at top

6

Please show us your new code

7

Your second new div element should have a closing tag.

8

We need to see the actual code to see what you are seeing. Use the format button</> and paste in what your current code looks like

9 
type or paste code h   <div class="container"></div>
      <div class="marker"></div>
     <div class="marker">
        <div class="marker"></div>
10

The closing div here still needs to go on the bottom. You want all the other divs to be inside the containers div. This </div> needs to be the very last thing and not at the top

Still missing the closing div tag here

<div class="marker">
11

ok will send you the outcome if it doesn’t work

12 
` <div class="container">
      <div class="marker">
     <div class="marker">
        <div class="marker"></div>`
13 
Your first new div element should have a closing tag.
14
always needs a closing tag
15

closer you but got rid of all the other divs closing tags

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

the three marker divs all need closing tags </div> so add the closing divs to the first two marker classes, and then you can actually just add another closing div after this line

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

Add another closing div after this line and it should be good. As well as adding the closing divs to the other two marker divs

16

thank you :slightly_smiling_face: I will attempt it again

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

I guess I just am not comprehending what inside container means
Your new div elements should be within the div with the class container.
18

Your last code was the closest so far. So what I mean by inside the div (or nesting) is this

<div class="top">
  <div> one </div>
  <div> two </div>
  <div> three </div>
  <div> four </div>
</div> //this is the closing div for the div with the class top

In the this example, I have four divs and they are inside the div with the class of "top. They are inside (or nested) the top div because they are in between the top divs opening and closing tag. Another example

<div class="example"> //opening div tag

   //anything in here is considered inside the div (or nested)

</div>//closing div tag for the top div

So lets take a look back at your closest code

` <div class="container"> //this is top div
      <div class="marker">//needs closing tag
     <div class="marker">//needs closing tag
        <div class="marker"></div>`//this line is ok
  //you need a closing div here for the top div. 
 //adding a close div here makes sure that everything is inside the top div
19

You are awesome Thank you

20

No problem, hopefully that works out for you.