Slider occupying more than 100vh

I have a problem, I added a slider to my header but it happens that it occupies more than the 100vh I gave, still occupies a little of the section below the header. Above this section it occupies I had a "before" that made a section divider appear, but this divider does not appear either ...

Now, can you tell me if I'm doing this section "divider" correctly?

And now, taking advantage of it, I'd like to make a filter-type gradient effect on top of the slider images, how?

I would also like to change the transition animation, instead of being fade, I would like a swipe left.

HTML code:

 <!--------------- HEADER ------------------------>

    <header>


        <div class="container">

    <input type="radio" id="i1" name="images" checked />
    <input type="radio" id="i2" name="images" />
    <input type="radio" id="i3" name="images" />    

    <div class="slide_img" id="one">            

            <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg"></div><divclass="slide_img" id="two">

            <img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg"></div><divclass="slide_img" id="three">
            <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg"></div><divid="nav_slide">
        <label for="i1" class="dots" id="dot1"></label>
        <label for="i2" class="dots" id="dot2"></label>
        <label for="i3" class="dots" id="dot3"></label>
    </div>

</div>


    </header>










    <!--------- SECTION SEARCH ------------>
     <section class="section-search">
        <div class="row">
          <h1>SEARCH YOUR VIBE</h1>
        </div>

            <div class="row steps-container">
                <div class="col span-1-of-2 steps">
                    <div>1</div>
                        <p>SEARCH WITH ONE OF THE FOLLOWING OPTIONS</p>
                </div>


                <div class="col span-1-of-2 steps">
                    <div>2</div>
                        <p>THEN THE PAGE WILL SWIPE LEFT AND A BUNCH OF VIBES WILL APPEAR</p>
                </div>
            </div>




        <div class="search-form">
        <div class="row">
                <input class="search-field" type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
        </div>

        <div class="row">
                <input class="search-field" type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
        </div>

        <div class="row">
                <input class="search-field" type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
        </div>


         <div class="row">
             <button class="search-btn" type="submeter" name="submeter">SEARCH</button>
         </div>
            </div>

    </section>

CSS:

/* slider */

#i1, #i2, #i3{ display: none;}



    .container .slide_img{
        position: absolute;
        width: 100%;;
        height: 100vh;
    }
    .container .slide_img img{
        width: 100%;
        height: 100vh;
    }

    /* .prev, .next{
        width: 12%;
        height: inherit;
        position: absolute;
        top:0; 
        background-color: rgba(116, 200, 210, 0);
        color:rgba(244, 244, 244,.9);
        z-index: 99;
        transition: .45s;
        cursor: pointer;
        text-align: center;
    } */

    /*.next{right:0;}
    .prev{left:0;} */

    label span{
        position: absolute;
        font-size: 100pt;
        top: 50%;
        transform: translateY(-50%);
    }

    /*.prev:hover, .next:hover{
        transition: .3s;
        background-color: rgba(88, 88, 89,.8);
        color: #ffffff; 
    } */

.container #nav_slide{
    width: 100%;
    bottom: 12%;
    height: 11px;
    position: absolute;
    text-align: center;
    z-index: -5;
    cursor: default;
}

#nav_slide .dots{
    top: -5px;
    width: 18px;
    height: 18px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
    transition: .4s;
}

#nav_slide .dots:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9);
    transition: .25s
}

.slide_img{z-index: -1;}

    #i1:checked ~ #one  ,
    #i2:checked ~ #two  ,
    #i3:checked ~ #three,
    #i4:checked ~ #four ,
    #i5:checked ~ #five 
    {z-index: 9; animation: scroll 1s ease-in-out;}

    #i1:checked  ~  #nav_slide #dot1,
    #i2:checked  ~  #nav_slide #dot2,
    #i3:checked  ~  #nav_slide #dot3,
    { background-color: rgba(255,255,255,.9);}

@keyframes scroll{
    0%{ opacity:.4;}
    100%{opacity:1;}
}       






/* -----------------------   SECTION SEARCH ---------------------------- */


.section-search::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
    margin-top: -10%;
  background: url(/img/divider_Prancheta%201.svg);
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 100;
}

.section-search {
    background-color: white;
    opacity: 80%;
    z-index: 2;
}

.steps-container {
    color: #000;
    width: 80%;
    margin: 0 auto;
}

.steps:first-child {
    margin-left: -2%;
    margin-right: 2%;
}

.steps:last-child {
    margin-right: -10%;
}

.steps>p {
    text-align: left;
    margin-top: 5px;
    letter-spacing: 1px;
    font-size: 90%;
}


.steps div {
    color: white;
    background-color: #000;
    display: inline-block;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 5px;
    float: left;
    font-size: 150%;
    margin-right: 25px; 
    margin-left: 5%;
    vertical-align: middle;
}


/*search box*/

.search-form {
    width: 80%;
    margin: 0 auto;
}


.search-field {
    width: 100%;
    padding: 7px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-top: 4%;
}

.search-btn {
    width: 15%;
    margin-top: 4%;
    background-color: #ccc;
    padding: 1%;
    border: 0;
}

*:focus {
    outline: none;
}

Thanks in advance!