<div id="container">

  <div id="first"></div>

  <div id="second"></div>

  <div id="third"></div>

  <div id="fourth"></div>  

</div>

* {

  margin: 0;

  padding: 0;

}

​

#container {

    overflow: auto;

    scroll-snap-type: x proximity;

    height: 100vh;

    display: flex;

}

​

#container div {

    scroll-snap-align: center;

    width: 40vw;

    flex: none;

}

​

#first {

    background: #2a9d8f;

}

​

#second {

    background: #e9c46a;

}

​

#third {

    background: #f4a261;

}

​

#fourth {

  background: #e76f51;

}