style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 1140px;
    margin: 0 auto;
}
.slide-gr{
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    /* overflow hidden để tí nữa cái slides tràn ra nó 
    che lại á ^^ */
    font-size: 0;
}
.slides{
    font-size: 0;
    /* tại sao mình lại dùng font size 0
    -> vì ở slide thằng con của nó mình chia layoyt
    dạng display inline-block
    -> nó tựa như các chữ bình thường (2 chữ kế nhau nó sẽ
    có 1 khoảng cách nhỏ nên mình phải cho 0 để triệu
    tiêu khoảng cách nó */
    transition: all 0.6s ease;
}
.slide{
    font-size: 30px;
    display: inline-block;
    text-align: center;
    padding: 30px 0;
    background-color: hotpink;
}
button{
    display: inline-block;
    width: 50%;
    padding: 10px;
    /* ví dụ button mình cho inline block
    2 khối left right đều 50% tại sao lại bị xuống hàng
    do mình chưa set font-size 0 cho cha nó */
    /* sau khi set thì 50% nó cộng lại đúng 100%
    k có lỗ hở nên không bị xuống hàng nữa
    tương tự mình làm với class .slide */
}