How to center the image and radio buttons on my image slider? – Html

I created an image slider but I don’t know how to center it even though I tried using the justify-content and align-items properties but it doesn’t work.

I tried using the justify-content and align-items properties but the images and the radio buttons doesn’t go on center.

Here’s my code:

    `

<!--image slider start-->
        <div class="slider">
            <div class="slides">
                <!--radio buttons start-->
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <!--radio buttons end-->
                <!--slide images start-->
                <div class="slide first">
                    <img src="images/slider-1.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-2.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-3.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-4.jpg" alt="">
                </div>
                <!--slide images end-->    
                <!--automatic navigation start-->
                <div class="nav-auto">
                    <div class="auto-btn1"></div>
                    <div class="auto-btn2"></div>
                    <div class="auto-btn3"></div>
                    <div class="auto-btn4"></div>
                </div>
                <!--automatic navigation end-->                          
            </div>
            <!--manual navigation start-->
            <div class="nav-manual">
                <label for="radio1" class="manual-btn"></label>
                <label for="radio2" class="manual-btn"></label>
                <label for="radio3" class="manual-btn"></label>
                <label for="radio4" class="manual-btn"></label>
            </div>
            <!--manual navigation end-->
        </div>
        <!--image slider end-->

        <script type="text/javascript">
            var counter = 1;
            setInterval(function(){
                document.getElementById('radio' + counter).checked = true;
                counter++;
                if(counter > 4){
                    counter - 1;
                }
            }, 5000);
        </script>

and here’s the CSS:

`/**For slider images**/
.slider {
    width: 800px;
    height: 500px;
    overflow:  hidden;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    left: 50%;
    width: 800px;
    height: 500px;
}

/**for manual slide nav**/
.nav-manual {
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;

}

.manual-btn {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #add8e7;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -20%;
}

#radio3:checked ~ .first {
    margin-left: -40%;
}

#radio4:checked ~ .first {
    margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;

}

.nav-auto div {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.nav-auto div:not(:last-child) {
    margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
    background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
    background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
    background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
    background: #add8e7;
}`