trystyle.css

element.style {
    bottom: 0px;
    /* background: black; */
    background: rgb(0 0 0 / 77%);
    width: 100%;
    transform: translateX(-96px);
}


body{   
    background-color: brown;
}

.carousel-container{
    position: relative;
    height: 400px;
    width: 50%;
    /* overflow: hidden; */
}

/* .car-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
.slide-box{
    /* transform: translateX(50%); */
    /* right: 50%; */
    position: relative;
    height: 100%;
    width: 100%;
    /* background-color: blue; */
}
.slide{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}
.car-slides{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 250ms ease-in;
}
button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.container{
    display:flex;
    justify-content: center;
}
.left{
    left: -50px;
}
.right{
    right: -50px;
}
.content1{
    height: 100%;
    width: 100%;
    background-color:aqua;
}
.content2{
    height: 100%;
    width: 100%;
    background-color:rgb(42, 4, 255);
}
.content3{
    height: 100%;
    width: 100%;
    background-color:rgb(0, 255, 81);
}