style.css

html,body{
    background-color: rgb(63, 118, 100);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8c52ff;

}
#item1,#item3{
    background-color: blueviolet;
}
#item2,#item4{
    background-color: cornflowerblue;
}
.carousel-container {
    text-align: center;
    margin: 290px;
    position:relative;
}

.container{
    height:300px;
    width:300px;
    display:flex;
    margin:50px;
    overflow-x:auto;
    overflow-y:hidden;
    text-align: center;
    scroll-snap-type:x mandatory;
    scroll-behavior: smooth;
}

.container .item{
   flex: 0 0 300px; 
   width:300px; 
   align-items:center;
   display:inline-flex;
   justify-content:center;
   font-size:3rem;
   color:white;
   font-weight:700;
   scroll-snap-align:start; 

 
}

.links a{

    background-color: cadetblue;
    color:aliceblue;
    border-radius:50%;
    display:inline-flex;
    padding:5px 10px;
    text-decoration:none;
    margin-left:50px;
   
   
}
.links {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* add some margin to separate links from carousel*/ 
    bottom: 0.1; /* add this to stick the links to the bottom of the carousel*/ 
    margin-top:2px;
    position:absolute;
}