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

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:

What do you not understand? The instructions or how to execute the instructions? You did not add any code.

i dont know what is that and how to make it :smiling_face_with_tear:

Which part? Do you know what a CSS rule is? You have been creating them for quite a while now. How do you target elements that have specific classes? If you are unsure, I would go back to this project’s earlier steps. You have been targeting classes multiple times already.

I wonder how to put them together, Is it .cap.sleeve {…} or something else

You learned how to do this in step 14 of the Cafe Menu project.

thanks so much :heart: :heart: :heart: :heart:

hi!!, I don’t understand, I do it this way and it tells me "
You should use a class selector to target both the cap and sleeve classes"
.cap{

display:inline-block;

}

.sleeve{

display:inline-block;

}

Look at my reply to @teajoonie. You have already learned how to do this in the Cat Photo App project.