'How can I remove the white line coming under my html slideshow

There is a white line coming under my html slideshow.I tried "display:block" in the css but it didn't worked. I would appreciate any suggestion that would help me resolving the issue. I am also attaching my html and css code. Pls go through it . I am also attaching an image for your help WEB PAGE RESULT NOTE: pls edit in your source code editor like vs code and change the images accordingly..

.slider{
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
  }
  
  .slides{
    width: 500%;
    height: 500px;
    display: flex;
  }
  
  .slides input{
    display: none;
  }
  
  .slide{
    width: 20%;
    transition: 2s;
  }
  
  .slide img{
    width: 100%;
    height: 500px;
  }
  
  
  /*css for manual slide navigation*/
  
  .navigation-manual{
    position: absolute;
    width: 1250px;
    margin-top: -220px;
    display: flex;
    justify-content: center;
  }
  
  .manual-btn{
    border: 2px solid #b4aaa5;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
  }
  
  .manual-btn:not(:last-child){
    margin-right: 40px;
  }
  
  .manual-btn:hover{
    background: #b4aaa5;
  }
  
  #radio1:checked ~ .first{
    margin-left: 0;
  }
  
  #radio2:checked ~ .first{
    margin-left: -20%;
  }
  
  #radio3:checked ~ .first{
    margin-left: -40%;
  }
  
  #radio4:checked ~ .first{
    margin-left: -60%;
  }
  
  /*css for automatic navigation*/
  
  .navigation-auto{
    position: absolute;
    display: flex;
    width: 1250px;
    justify-content: center;
    margin-top: 280px;
  }
  
  .navigation-auto div{
    border: 2px solid #b4aaa5;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
  }
  
  .navigation-auto div:not(:last-child){
    margin-right: 40px;
  }
  
  #radio1:checked ~ .navigation-auto .auto-btn1{
    background: #b4aaa5;
  }
  
  #radio2:checked ~ .navigation-auto .auto-btn2{
    background: #b4aaa5;
  }
  
  #radio3:checked ~ .navigation-auto .auto-btn3{
    background: #b4aaa5;
  }
  
  #radio4:checked ~ .navigation-auto .auto-btn4{
    background: #b4aaa5;
  }
  .background-img {
    background: url("images/Chemical\ Background.jpg") no-repeat center
      center/cover;
    color: #fff;
  }
  .about-us {
    font-size: 1.2rem;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    padding: 2rem 15rem 5rem 15rem;
    text-align: left;
  }

<!DOCTYPE html>
<html lang="en">
<head>
 <title>HOME</title>
 <link rel="shortcut item"  href="../favicon.ico?v=2" />
 <meta name = "description" content="">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
</head>
    <!--image slider start-->
    <div class="slider">
        <div class="slides">
          <!--radio buttons start-->
          <input type="radio" name="radio-btn" id="radio1">
          <input type="radio" name="radio-btn" id="radio2">
          <input type="radio" name="radio-btn" id="radio3">
          <input type="radio" name="radio-btn" id="radio4">
          <!--radio buttons end-->
          <!--slide images start-->
          <div class="slide first">
            <img src="images/1.jpg" alt="">
          </div>
          <div class="slide">
            <img src="images/2.jpg" alt="">
          </div>
          <div class="slide">
            <img src="images/3.jpg" alt="">
          </div>
          <div class="slide">
            <img src="images/4.jpg" alt="">
          </div>
          <!--slide images end-->
          <!--automatic navigation start-->
          <div class="navigation-auto">
            <div class="auto-btn1"></div>
            <div class="auto-btn2"></div>
            <div class="auto-btn3"></div>
            <div class="auto-btn4"></div>
          </div>
          <!--automatic navigation end-->
        </div>
        <!--manual navigation start-->
        <div class="navigation-manual">
          <label for="radio1" class="manual-btn"></label>
          <label for="radio2" class="manual-btn"></label>
          <label for="radio3" class="manual-btn"></label>
          <label for="radio4" class="manual-btn"></label>
        </div>
        <!--manual navigation end-->
      </div>
      <!--image slider end-->
  
      <script type="text/javascript">
      var counter = 1;
      setInterval(function(){
        document.getElementById('radio' + counter).checked = true;
        counter++;
        if(counter > 4){
          counter = 1;
        }
      }, 5000);
      </script>


<div class="background-img">
    <h2>ABOUT US</h2><hr>
    <div class="about-us">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo, ipsa eos nemo nostrum eum amet harum suscipit esse laborum! Quae adipisci earum nihil sint, officia quia expedita blanditiis ipsam. Ratione!
    </div>

Solution 1:^[1]

Try to lower height of your slider class, e.g:

.slider { height: 280px; }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Moebius

'How can I remove the white line coming under my html slideshow

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]