Slideshow border unwanted padding

Question

I'm using this slider in my website, but once I implement this in my website the slider border padding without any reason and the slider arrows button disappear.

Here is my slider CSS code:

/* Slideshow */
#slideshow {
    margin: -200px auto;
    position: relative;
    width: 100%;
    padding: 1% 1% 56.25% 1%; /*56.25 is for 16x9 resolution*/
        border-radius:20px;
        background: rgba(0,0,0,0.2);
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
  box-sizing:border-box;
}

#slideshow > div {
    position: absolute;
}

#slideshow > div > img {
    width: 100%;
    height: 50vh;
    border-radius:20px;
}

#slideshow:hover i, #slideshow:hover .slider-dots{
    opacity: 1;
    }

.slidebtn {
    z-index: 99;
    background:transparent;
    outline:none;
    border:none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    padding:0 10px 0 10px;
    }

.slidebtn:active,
.slidedtn:focus {
    outline:none;
}

.slidebtn i {
    color:#FFF;
    font-size:72px;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;

    }

.prev {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
}

.next {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
}


.slider-dots {
    opacity: 0.2;
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  position:absolute;
  left:50%;
  bottom:3%;
  transform: translate(-50%, 0);
  z-index:99;
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;

}

.slider-dots li {
  color: #000;
  display: inline;
  font-size: 48px;
  margin-right: 5px;
  cursor:pointer;
}

.slider-dots li.active-dot {
  color: #fff;
}

I would like to make the slider button visible, and the border stop padding to the bottom, but I've no idea why the elements padding downwards and disappearing, I'm went all over the code for few times.

How can I make slider button visible and stop the slider from padding down?

Codepen

Answer 1

The original link has

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

while your css only has

#slideshow > div {
    position: absolute;
}