Tell us what’s happening:
Not understanding this part, thought it would just be identical to the previous marker we made, have tried it on the same line, separate line, separate lines nested (which I knew would be wrong but tried it anyway since nothing else I’m trying is working)
I’ve added just the one at the end of all three, one by each when on the same line, separate line, etc.
Obviously I’m missing something but I don’t know what. My first red marker is just getting bigger (which I thought was just a case of all three markers now being next to each other and something a subsequent step would space out and fix, then presumably change the colours)
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>
<div class="container">
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></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/106.0.0.0 Safari/537.36
Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 14
Link to the challenge: