Landing page

Hey everyone. I need immediate help in my project. The issue is that my “specifications” section is overflowing below is the HTML and CSS code of my ongoing project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='LandingPage_Style.css'>
    <title>Samsung Galaxy Smartphones in Pakistan - August 2023</title>
    <script src="https://kit.fontawesome.com/dea622ec45.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap" rel="stylesheet">
    
</head>
<body>
  <!-- NAVIGATION BAR -->
  <div class="navbar">
    <div class="navbar-content">
      <a href="#" class="active">Home</a>
      <a href="#rev">Reviews</a>
      <a href="#specs">Specifications</a>
      <a href="#about">About Us</a>
    </div>
  </div>
    
    <div class="image-container">
     <img src="/images/Galaxy_Background.jpg" alt="Partial Page Image" class="Backimage">

    <div class="buttons-overlay1">
      <button id="backwardBtn" class="nav-button1" onclick="changeImage(-1)">&#5130;</button>
    </div>

    <div class="buttons-overlay2">
      <button id="forwardBtn" class="nav-button2" onclick="changeImage(1)">&#5125;</button>
    </div>

    <div class="text-overlay">
        <h1>Recently Launched Samsung<br>Smartphones In Pakistan<br></h1>
        <span>by Maaz Siddiqui</span>
      </div>
    </div>
    
    <img src="/images/F_34.png" alt="Partial Page Image" id="image">

    <section class="getdiscount">
      <hr>
        <h2>Get up to 30&percnt; Discount</h2>
          <span>(Only for first 10,000 customers)</span>

              <figure class="discount">
                <div>
                  <img src="/images/SG_F34.jpeg" height="200" width="100">
                  <button class="quantity-btn" data-product="SG_F34">+</button>
                  <input type="text" class="quantity-input" id="SG_F34-quantity" value="0" readonly>
                  <button class="quantity-btn" data-product="SG_F34">-</button>
                </div>
                <div>
                  <img src="/images/SG_A34.png" height="200" width="100">
                  <button class="quantity-btn" data-product="SG_A34">+</button>
                  <input type="text" class="quantity-input" id="SG_A34-quantity" value="0" readonly>
                  <button class="quantity-btn" data-product="SG_A34">-</button>
                </div>
                <div>
                  <img src="/images/SG_A54.png" height="200" width="100">
                  <button class="quantity-btn" data-product="SG_A54">+</button>
                  <input type="text" class="quantity-input" id="SG_A54-quantity" value="0" readonly>
                  <button class="quantity-btn" data-product="SG_A54">-</button>
                </div>
              </figure>

          <button class="btn-1">Add To Cart</button>
          <button class="btn-2">Add To Cart</button>
          <button class="btn-3">Add To Cart</button>
      <hr>
    </section>

    <!-- SPECIFICATION SECTION -->
        <!-- SPECIFICATION 1 -->
      
    <section class="specifications-imgs" id="specs">
      <h2>Key Specifications</h2>
      
      <img src="/images/SGF34_duo.png" height="250" width="190">
      <div class="specifications">
        <div class="specification">
          <i class="fas fa-microchip spec-icon"></i>
          <div class="spec-text">Octa core (2.4 GHz, 2 GHz) Processor</div>
        </div>
        <div class="specification">
          <i class="fas fa-mobile-alt spec-icon"></i>
          <div class="spec-text">6.5 Inches Screen</div>
        </div>
        <div class="specification">
          <i class="fas fa-memory spec-icon"></i>
          <div class="spec-text">8GB RAM</div>
        </div>
        <div class="specification">
          <i class="fas fa-battery-full spec-icon"></i>
          <div class="spec-text">6000mAh Battery</div>
        </div>
        <div class="specification">
          <i class="fas fa-hdd spec-icon"></i>
          <div class="spec-text">128GB Storage</div>
        </div>
        <div class="specification">
          <i class="fas fa-camera spec-icon"></i>
          <div class="spec-text">50MP+8MP+2MP Camera</div>
        </div>
        <div class="specification">
          <i class="fab fa-android spec-icon"></i>
          <div class="spec-text">Android 13, One UI 5.1</div>
        </div>
        <div class="specification">
          <i class="fas fa-calendar-alt spec-icon"></i>
          <div class="spec-text">Release Date: August 7, 2023</div>
        </div>
      </div>

              <!-- SPECIFICATION 2 -->
              
      <img src="/images/SGA34_duo.png" height="250" width="190">
      <div class="specifications" id="a34">
        <div class="specification">
          <i class="fas fa-microchip spec-icon"></i>
          <div class="spec-text">2.6 MHz Octa core Processor</div>
        </div>
        <div class="specification">
          <i class="fas fa-mobile-alt spec-icon"></i>
          <div class="spec-text">6.6 Inches Screen</div>
        </div>
        <div class="specification">
          <i class="fas fa-memory spec-icon"></i>
          <div class="spec-text">6GB/8GB RAM</div>
        </div>
        <div class="specification">
          <i class="fas fa-battery-full spec-icon"></i>
          <div class="spec-text">5000mAh Battery</div>
        </div>
        <div class="specification">
          <i class="fas fa-hdd spec-icon"></i>
          <div class="spec-text">128GB, 256GB Storage</div>
        </div>
        <div class="specification">
          <i class="fas fa-camera spec-icon"></i>
          <div class="spec-text">48MP+8MP+5MP Camera</div>
        </div>
        <div class="specification">
          <i class="fab fa-android spec-icon"></i>
          <div class="spec-text">Android 13, One UI 5.1</div>
        </div>
        <div class="specification">
          <i class="fas fa-calendar-alt spec-icon"></i>
          <div class="spec-text">Release Date: March 24, 2023</div>
        </div>
      </div>

              <!-- SPECIFICATION 3 -->
      <img src="/images/SGA54_duo.png" height="250" width="190">
      <div class="specifications" id="a54">
        <div class="specification">
          <i class="fas fa-microchip spec-icon"></i>
          <div class="spec-text">2.4 MHz octa-core Processor</div>
        </div>
        <div class="specification">
          <i class="fas fa-mobile-alt spec-icon"></i>
          <div class="spec-text">6.4 Inches Screen</div>
        </div>
        <div class="specification">
          <i class="fas fa-memory spec-icon"></i>
          <div class="spec-text">6GB/8GB RAM</div>
        </div>
        <div class="specification">
          <i class="fas fa-battery-full spec-icon"></i>
          <div class="spec-text">5000mAh Battery</div>
        </div>
        <div class="specification">
          <i class="fas fa-hdd spec-icon"></i>
          <div class="spec-text">128GB, 256GB Storage</div>
        </div>
        <div class="specification">
          <i class="fas fa-camera spec-icon"></i>
          <div class="spec-text">50MP+12MP+5MP Camera</div>
        </div>
        <div class="specification">
          <i class="fab fa-android spec-icon"></i>
          <div class="spec-text">Android 13, One UI 5.1</div>
        </div>
        <div class="specification">
          <i class="fas fa-calendar-alt spec-icon"></i>
          <div class="spec-text">Release Date: March 24, 2023</div>
        </div>
      </div>
    </section>

 <!-- REVIEWS SECTION -->

      <div class="review-section" id="rev">
        <div class="review">
          <div class="user-info">
            <img class="user-avatar" src="/images/emily.jpg" alt="User 1">
            <div>
              <h2>Reviews</h2>
              <div class="firstuser-name"><b>Emily</b></div>
              <div class="user-comment">"I'm loving my new Samsung Galaxy phone! The camera quality is mind-blowing, and the sleek design is just impressive. Highly recommended!"</div>
            </div>
          </div>
        </div>
        <div class="review">
          <div class="user-info">
            <img class="user-avatar" src="/images/alex.jpg" alt="User 2">
            <div>
              <div class="seconduser-name"><b>Alex</b></div>
              <div class="user-comment">"The performance of the Samsung Galaxy phone is top-notch. I can multitask smoothly, and the battery life is fantastic. Definitely worth the investment!"</div>
            </div>
          </div>
        </div>
        <div class="review">
          <div class="user-info">
            <img class="user-avatar" src="/images/Sophia.jpg" alt="User 3">
            <div>
              <div class="thirduser-name"><b>Sophia</b></div>
              <div class="user-comment">"Samsung Galaxy phones never disappoint. The AMOLED display is stunning, and the user experience is seamless. I can't imagine using any other phone now."</div>
            </div>
          </div>
        </div>
      </div>


      <!-- FOOTER SECTION -->
      <footer class="footer-section" id="about">
        <section class="container">
            <section class="footer-content">
                <section class="footer-contact">
                  <h3>Contact Info</h3>
                    <ul>
                      <li>Mobile: 03130250951</li>
                      <li>WhatsApp: 03147987990</li>
                      <li>Email Address: [email protected]</li>
                    </ul>
                </section>
                <section class="footer-links">
                    <h3>Details of Specifications</h3>
                      <ul>
                        <li><a href="https://g-mart.pk/mobile/samsung-galaxy-f34/" target="_blank">Samsung Galaxy F34 5G</a></li>
                        <li><a href="https://g-mart.pk/mobile/samsung-galaxy-a34/" target="_blank">Samsung Galaxy A34 5G</a></li>
                        <li><a href="https://g-mart.pk/mobile/samsung-galaxy-a54/" target="_blank">Samsung Galaxy A54 5G</a></li>
                      </ul>
                </section>
                  <section class="footer-social">
                    <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                  </section>
              </section>

            <section class="footer-copyright">
                <span>&#9400; 2023 MaazSiddiqui. All Rights Reserved.</span>
            </section>

          </section>
    </footer>

    <script src="script.js"></script>
</body>
</html>

And below is CSS code


body,html {
    font-family: 'Kanit', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%; 
}

.navbar {
    background-color: #333;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
  }

  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s;
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  .navbar a.active {
    background-color: #4CAF50;
    color: white;
  }

  .navbar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
.image-container {
    position: relative;
    width: 100%; 
    height: 70%; 
    overflow:hidden;
}

.Backimage {
    width: 100%;
    display: block;
}

#image {
    position: absolute;
    top: 70px;
    right: 220px;
    max-width: 80%;
    max-height: 40%;
}

.buttons-overlay1 {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-30%, -50%);
}

.buttons-overlay2 {
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-30%, -50%);
}
  
  
.nav-button1 {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.nav-button2 {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.text-overlay {
    position: absolute;
    top: 30%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    padding-left: 10px;
}
  
.text-overlay h1
 {
    font-weight: bold;
    position: relative;
    bottom: 25px;
}

.text-overlay span{
    font-size: medium;
}


.getdiscount {
    text-align: center;
    padding: 20px;
}

.getdiscount h2 {
    font-size: 24px;
    margin: 10px 0px;
  }

.getdiscount span {
    /*text-align: center;
    position: relative;
    bottom: 15px;*/ 
    font-size: 14px;
    display: block;
    margin-bottom: 20px; 
}

.discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .discount img {
    height: 200px;
    width: 100px;
    object-fit: cover;
  }

  .discount div {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .quantity-btn {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
  }

  .quantity-input {
    padding: 5px 10px;
    width: 40px;
    text-align: center;
    border: 1px solid #ccc;
  }

  .btn-1, .btn-2, .btn-3{
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  

.btn-1{
   position: absolute;
   left: 55px;
}

.btn-3{
   position: absolute;
    right: 55px;
}

.specifications-imgs {
   padding: 30px;
    
}



.specifications {
    display: grid;
    grid-template-columns: repeat(2,42%);
    gap: 15px;
    margin-bottom: -180px;
    position: relative;
    bottom: 200px;
    left: 250px;
  }


  .specification {
    display: flex;
    align-items: center;
    position: relative;
    left: 30px;
    
  }

  div[id*='a34']{
    position: relative;
    left: 250px;
    bottom: 180px;
  }

  div[id*='a54']{
    position: relative;
    left: 250px;
    bottom: 155px ;
  }
  
  .spec-icon {
    font-size: 24px;
    text-align: center;
    width: 30px;
    color: #555;
  }

  .spec-text {
    font-weight: bold;
    margin-left: 10px;
    padding-block: 10px;
  }

img[src*='SGF34_duo']{
    position: relative;
    top: 40px;
}

img[src*='SGA34_duo']{
    position: relative;
    top: 60px;
}

img[src*='SGA54_duo']{
    position: relative;
    top: 80px;
}



.review-section {
    position: relative;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 150px ;
    margin-bottom: 100px ;
  }
  
.reviews h1{
    position: relative;
    left: 220px;
}

  .review {
    margin-bottom: 20px;
  }
  .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
  }

  img[src*='emily']{
    position: relative;
    top: 35px;

  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .user-name {
    font-weight: bold;
  }
  .user-comment {
    font-style: italic;
    color: #555;
  }

.footer-section {
    background-image: url(/images/footerBack.jpg);
    background-position: center;
    background-size: cover;
    color: #ffffff;
    /*position: relative;
    top: 380px;*/
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.footer-links ul, ul {
    list-style: none;
    padding: 0;
}

.footer-links li, li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
}

.footer-social a {
    color: #ffffff;
    font-size: 20px;
    margin-right: 20px;
}

.footer-social a:last-child {
    margin-right: 0;
}

.footer-copyright {
    margin-top: 30px;
    text-align: center;
}

Below is the JS code

const images = ['/images/F_34.png', '/images/A_34.png', '/images/A_54.png'];
  let currentIndex = 0;
  const imageElement = document.getElementById("image");
  
  function changeImage(direction) {
    currentIndex += direction;
    if (currentIndex < 0) {
      currentIndex = images.length - 1;
    } else if (currentIndex >= images.length) {
      currentIndex = 0;
    }
    imageElement.src = images[currentIndex];
  }
  
  // Initial load
  changeImage(0);
  
  const quantityButtons = document.querySelectorAll('.quantity-btn');
  const quantityInputs = document.querySelectorAll('.quantity-input');

  quantityButtons.forEach(button => {
    button.addEventListener('click', () => {
      const product = button.getAttribute('data-product');
      const input = document.getElementById(`${product}-quantity`);
      const currentValue = parseInt(input.value);
      
      if (button.textContent === '+') {
        input.value = currentValue + 1;
      } else if (button.textContent === '-' && currentValue > 0) {
        input.value = currentValue - 1;
      }
    });
  });