我正在努力得到這個(gè)結(jié)果

[![在此輸入圖像描述][1]][1]

但是我得到了這個(gè)結(jié)果

[![在此輸入圖像描述][2]][2]

請(qǐng)幫我修理一下。下面我附上代碼。 HTML -

<section id="header">
    <div class="black-line"></div>
    <div class="navigation-bar">
        <h2>CADAC</h2>
        <div class="nav-menu">
            <ul class="nav-menu-list">
                <li class="active-nav-bar"><a href="">HOME</a></li>
                <li class=""><a href="">PAGE</a></li>
                <li class=""><a href="">SERVICES</a></li>
                <li class=""><a href="">CONTACT US</a></li>
                <li class=""><a href="">REGISTRATION FORM</a></li>
                <li class=""><a href="">VERIFY CERTIFICATE</a></li>
            </ul>
            <i class="fa-solid fa-magnifying-glass"></i>
            <i class="fa-solid fa-bars"></i>
        </div>
    </div>
    <section class="img-slider">
        <div class="image-slider">
            <div class="slide-content">
                <i class="fa-solid fa-car"></i>
                <p>MOVING WITH US</p>
                <h1>Fast & Secure Courier<br>For Small & Big Packages</h1>
                <button class="normal">PURCHASE ME</button>
            </div>
        </div>
        <div class="image-slider slider-two">
            <div class="slide-content">
                <i class="fa-solid fa-bolt"></i>
                <p>MOVING WITH US</p>
                <h1>Super-fast and fuss-free<br>delivery sevice</h1>
                <button class="normal">PURCHASE ME</button>
            </div>
        </div>
        <div class="image-slider slider-three">
            <div class="slide-content">
                <i class="fa-solid fa-wallet"></i>
                <p>MOVING WITH US</p>
                <h1>Easy on-spot, card<br>payment methods</h1>
                <button class="normal">PURCHASE ME</button>
            </div>
        </div>
    </section>
</section>

JavaScript -

$(document).ready(function () {
        $('.img-slider').slick({
            dots: false,
            arrows: true,
            infinite: true,
            slidesToShow: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            drag: true,
        });
    });

CSS -

#header {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.black-line {
  height: 65px;
  width: 100%;
  background-color: #333232;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-menu i {
  margin: 10px;
}

.navigation-bar {
  height: 100px;
  width: 85%;
  position: absolute;
  background-color: #ffffff;
  justify-content: space-between;
  padding: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 11%;
  cursor: pointer;
  box-shadow: 0 10px 15px #00000040;
}

.navigation-bar h2 {
  color: #333232;
  transition: 0.5s ease;
}

.navigation-bar h2:hover {
  color: #ffdc39;
}

.nav-menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-menu-list li {
  list-style: none;
  padding: 20px;
  position: relative;
  background-color: #ffffff;
  transition: 0.3s ease;
}

.nav-menu-list li:hover {
  background-color: #ffdc39;
}

.nav-menu-list li.active-nav-bar {
  background-color: #ffdc39;
}    

.nav-menu-list li a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #333232;
}

.img-slider {
  position: relative;
  width: 100%;
  height: 90vh;
}

.img-slider .image-slider {
  background-image: url(Assets/colorful_cloud.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10%;
}    

.img-slider .slider-two {
  background-image: url(Assets/product_delivery.jpg);
}

.img-slider .slider-three {
  background-image: url(Assets/card_payment.jpg);
}

.image-slider .slide-content {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.image-slider .slide-content i {
  font-size: 100px;
  color: #ffdc39;
  margin: 10px;
}

.image-slider .slide-content p {
  font-size: 16px;
  color: #ffffff;
}

.image-slider .slide-content h1 {
  font-weight: 700;
  margin: 10px;
  text-align: center;
  margin-bottom: 30px;
}

.image-slider .slide-content button {
  margin-top: 20px;
}

請(qǐng)幫我解決這個(gè)問題。 謝謝你 [1]:https://i.stack.imgur.com/ChYO5.png [2]:https://i.stack.imgur.com/hTeLE.jpg