Step 14 What am I doing wrong?

HTML-CSS
1

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.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>CSS Color Markers</h1>
  <div class="container">
    <div class="marker">
      <div class="marker">
        <div class="marker">
      </div>
       </div>
        </div>
         </div>
</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/102.0.0.0 Safari/537.36

Challenge: Step 14

Link to the challenge:

2

They shouldn’t be nested inside of each other. They should come one after the other.

3

Still not working

4

We’re going to need a little more to go on. Please paste your updated code in here so we can see exactly what you are doing.

To post your code in this forum you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

5
6

///









///

7

\
\









\\

8

This is only getting more frustrating

9

Back ticks, not back slashes. You can also click the </> icon right above the editor and it will give you single back ticks to put your code in. They might not be as good as triple back ticks but will probably do.

10

Why is it so difficult to get help on this subject?

<div class="container">
      </div>
      <div class="marker">
        </div>
        <div class="marker">
          </div>
          <div class="marker">
        </div>
1 Like
11

thank you figured out what back ticks are wont ever forget that is for sure

12

I have tried three different ways to post the code and am still getting it wrong

13

What you did here is you closed the container div immediately so the marker divs aren’t nested in it any more. You want to close the container div after the marker divs so that the are nested.

14

Isnt that what I did in my first code above?

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

[/quote]

16

Yes, in your first code the markers are all inside the container. The problem with your first code is that the markers are also nested within each other too (the second marker is inside the first and the third is inside the second). The markers should all be at the same level. They should be siblings (next to each other, not nested).

1 Like
17

My Gosh, Thank you. I think I need to stop and see this again in the morning. Thank you again I got it.

18

Hi. Did you get the code right? It works like this:

image

1 Like
19

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.