Почему появился лишний отступ?

<section class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
            </div>
            <!--pagination-->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

.banner {
    height: 100%;
    position: relative;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background-image: url('../img/banner.jpg');
    background-size: cover;
}