Slick Slider covers up elements below

My slick slider images are covering up the elements that are supposed to sit below, and I'm not sure why. I need #features to sit below #slideshow, but right now it's covered up. I'm not sure what's making the slider overlap the elements below it on the page. I don't want to just "push" the #features div down with CSS, like by using bottom: -50px or whatever because I'm aiming for responsive design. I need the slideshow slider and slides to take up the same amount of height that the images do. Hopefully this makes sense! Here's my code:

HTML:

<div id="slideshow">
    <div class="slide"><img src="images/Need Space.jpg"></div>
    <div class="slide"><img src="images/Open Lot.jpg"></div>
    <div class="slide"><img src="images/IMG_0713a.jpg"></div>
    <div class="slide"><img src="images/IMG_0714a.jpg"></div>
</div>
<div id="features" class="flex">
    <div>Safe</div>
    <div>Secure</div>
    <div>24-Hour Access</div>
</div>
<div id="description">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS:

    /* SLIDESHOW */
#slideshow {
  width: 100%;
  height: 50vh;
  margin-bottom: 5vh;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
}

.slick-initialized .slick-track {
    display: flex;
    align-items: center;
}

/* FEATURES */
#features div {
  margin: 5vw;
  padding-bottom: .5vh;
  font-weight: bolder;
  font-size: 2.5vh;
  letter-spacing: .25vw;
  border-bottom: 1px solid white;
}

from Recent Questions - Stack Overflow https://ift.tt/3mUvmXr
https://ift.tt/eA8V8J