Почему это работает не корректно?

Одна картинка должна расположиться в зелёной области а остальные не должно быть видно. Что тут не правильно?

<body>
    <div class="all">
        <input checked type="radio" name="respond" id="desktop">
        <div id="slider">
            <input checked type="radio" name="slider" id="switch1">
            <input type="radio" name="slider" id="switch2">
            <input type="radio" name="slider" id="switch3">
            <input type="radio" name="slider" id="switch4">
            <input type="radio" name="slider" id="switch5">
            <!-- <input type="radio" name="slider" id="switch6">
            <input type="radio" name="slider" id="switch7">
            <input type="radio" name="slider" id="switch8"> -->

            <div id="slides">
                <div id="owerflow">
                    <div class="image-1">
                        <article><img src="img/ФС1.jpg" alt=""></article>>
                        <article><img src="img/ФС2.jpg" alt=""></article>
                        <article><img src="img/ФС3-бильярд.jpg" alt=""></article>
                        <article><img src="img/ФС4.jpg" alt=""></article>
                        <article><img src="img/ФС5.jpg" alt=""></article>
                        <!-- <article><img src="img/Сауна/ФС6.jpg" alt=""></article>
                        <article><img src="img/Сауна/ФС7.jpg" alt=""></article>
                        <article><img src="img/Сауна/ФС8.jpg" alt=""></article> -->
                    </div>
                </div>
            </div>
            <div id="controls">
                <label for="switch1"></label>
                <label for="switch2"></label>
                <label for="switch3"></label>
                <label for="switch4"></label>
                <label for="switch5"></label>
                <!-- <label for="switch6"></label>
                <label for="switch7"></label>
                <label for="switch8"></label> -->
            </div>
            <div id="active">
                <label for="switch1"></label>
                <label for="switch2"></label>
                <label for="switch3"></label>
                <label for="switch4"></label>
                <label for="switch5"></label>
                <!-- <label for="switch6"></label>
                <label for="switch7"></label>
                <label for="switch8"></label> -->
            </div>
        </div>
    </div>
</body>

#slider {
    position: relative;
    text-align: center;
    top: 10px;
}

#slider {
    margin: 0 auto;
}

#slides article {
    width: 20%;
    float: left;
}

#slider .image {
    width: 50%;
    line-height: 0;
}

#overflow {
    widows: 100%;
    overflow: hidden;
}