I've successfully integrated a slideshow within a section tag using a div tag. To include text above the slideshow, I placed another div tag above the slideshow div. However, when adding more text, it causes the images in the slideshow to get pushed down and cut off. Is there a solution to prevent this from happening? Thank you
<!DOCTYPE html>
<html>
<head>
<title> AnimeExpoBd </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li class="logo"><a href="index.html">ANIME EXPO LOGO</a></li>
<li class="navbar"><a href="index.html">HOME</a></li>
<li class="navbar"><a href=#gotoaboutus>ABOUT US</a></li>
<li class="navbar"><a href="moreaboutus.html">SCHEDULE</a></li>
<li class="navbar"><a href="contactus.html">CONTACT US</a></li>
</ul>
</header>
<section class="feature-box opening">
<div id="gotoaboutus" class="about-us"><strong>ABOUT US</strong><p class="descpara">We aim to popularize and educate the Bangladesh public about Japanese anime and manga culture, as well as provide a forum to facilitate communication between professionals and fans. We're passionate about all things anime. We're here to help you discover hidden gems, learn more about new and current anime, find fan art and cosplay of all your faves, and get your opinions!</div>
<div class="Images"></div>
</section>
<section class="feature-box closing">
<div class="sched">Section A<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque exercitationem ad sed enim maiores cum recusandae numquam quibusdam. Perferendis reiciendis ut tenetur dignissimos neque hic impedit optio quasi libero sunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, ipsum? Exercitationem accusantium quaerat numquam architecto cum culpa magnam illo quos quod. Eligendi placeat repellendus perferendis veritatis ducimus iure maxime vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae rerum quia odit veniam natus consequuntur iste eum eos officiis ab optio sed itaque quasi possimus voluptatibus, velit est dolor quo. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat nostrum in, quidem totam a atque obcaecati natus ratione quae rem ipsam sed hic laudantium enim aspernatur nemo cum, nobis eius.</p></div>
<div class="slidershow middle">
<div class="header">Header and Description</div>
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.png" alt="">
</div>
<div class="slide">
<img src="images/4.jpg" alt="">
</div>
<div class="slide">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</section>
<footer>footer</footer>
</body>
</html>
section.feature-box.closing {
margin: 5px;
padding: 10px;
height: 620px;
width: 1310px;
background-color: #34495e;
display: flex;
}
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
}
section.feature-box.closing div.sched {
width: 481px;
text-align: center;
color:black;
font-size: medium;
background-color: #c3edea;
}
section.feature-box.closing div.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
section.feature-box.closing div.middle {
position: relative;
top: 68%;
left: 31%;
transform: translate(-50%, -50%);
}
section.feature-box.closing div.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
section.feature-box.closing div.navigation label.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
}
section.feature-box.closing div.navigation label.bar:hover {
background-color: white;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
section.feature-box.closing div.slides {
width: 500%;
height: 100%;
display: flex;
background-size: 100%;
}
section.feature-box.closing div.slides div.slide {
width: 20%;
transition: 0.6s;
}
section.feature-box.closing div.slides div.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -20%;
}
#r3:checked ~ .s1 {
margin-left: -40%;
}
#r4:checked ~ .s1 {
margin-left: -60%;
}
#r5:checked ~ .s1 {
margin-left: -80%;
}