Confuse on this step

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
need help I dont understand how im messing up with this code

  **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.5005.63 Safari/537.36 Edg/102.0.1245.39

Challenge: Step 14

Link to the challenge:

1 Like
2

Hi @Moonknight911

First you need to understand what they want to solve the problem. If you dont understand the question probably is because you are not reading carefully (or you need some rest) or you just have some lack of knowledge. It is normal tough.
So you could check for divs syntax, for example :

and see if that helps you understand the problem and thus solve it.
I hope that helps. Happy coding and dont give up!! :muscle:

3

I’m not 100% sure but I think the problem is with how you have introduced your divs.
You have introduced 3 divs and then put each one after the other. Then you put all of their closing tags at the end. With this method, all of your divs will render on top of each other and it will look as if there’s only 1 div.

You should put each closing tag after its opening tag, like this:

This will make one bar with a height of 3 divs. If you want to see them as 3 separate bars you should put some top and bottom margins in CSS for your .marker class to see the difference.

.marker {
width: 200px;
height: 25px;
background-color: red;
margin: 5px;
}

This is your code with my edit. Put it in your editor and see how it looks.

Colored Markers

CSS Color Markers

h1 {
text-align: center;
}

.marker {
width: 200px;
height: 25px;
background-color: red;
margin: 10px auto;
}

4

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