Learn CSS by Building a Set of Colored Markers-Step78 explanation help

[Iseria]

I understand how to pass this step, I just don’t understand what the code is doing. If anyone could explain it to me I would be very grateful!

Here is the code so far, I am confused about the “. cap” part.
‘’’
.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);
}

.cap, .sleeve {
display: inline-block;
}

.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

‘’’

‘’’
< div class =" marker red " >
< div class = "cap “> < / div >
< div class =” sleeve "> < / div >
< / div >
‘’’

It seems like the cap class is moving the sleeve class further left, the less pixels it has.

for example at 30 px it goes to the left and at 90 px it will make the sleeve class go to the right more.

I just don’t understand how it’s doing this. I thought this is what margin was for and px was used for making things bigger or smaller, not moving things left to right.

I hope this makes sense, if more info is needed I will send it. Also thank you to anyone who took the time out of their day to read this! : )

[dannee]

add a link to the challenge

[Iseria]

freeCodeCamp.org

thank you!

[dannee]

the challenge wants you to use a class selector to set the display of the two classes being cap and sleeve to inline-block.

this is the syntax for it.

.class1, .class2 { property: value }

in the challenge,
.class1 = .cap
.class2 = .sleeve
property = display
value = inline-block

if you replace this values in the code, it would go through

Happy coding

[Iseria]

Ohh yea I know about that part but I just don’t really understand what the .cap code itself is doing. it seems like the “. cap” width: px is moving the sleeve over but I have never seen px do this with just width . This is because usually width makes things wider/shorter not move things left or right while not changing the width. Thank you so much for replying! I hope I am not confusing you and explained myself clearly : )

[dannee]

its not moving it.

the both containers are both on the same line
reducing the width of one shifts the second one to take up the space that is left.