Tell us what’s happening:
Describe your issue in detail here.
I have no idea about this
Step 78
It looks like your sleeve disappeared, but don’t worry – it’s still there. What happened is that your new cap div
is taking up the entire width of the marker, and is pushing the sleeve down to the next line.
This is because the default display
property for div
elements is block
. So when two block
elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other.
To position two div
elements on the same line, set their display
properties to inline-block
.
Create a new rule to target both the cap
and sleeve
classes, and set display
to inline-block
.
**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 red">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<div class="marker green">
</div>
<div class="marker blue">
</div>
</div>
</body>
</html>
/* file: styles.css */
h1 {
text-align: center;
}
.container {
background-color: rgb(255, 255, 255);
padding: 10px 0;
}
.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}
.cap {
width: 60px;
height: 25px;
}
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
}
.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}
.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
}
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0
Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 78
Link to the challenge: