Solid color background is applying with some transparency

i have a backgroundcolor set white in “#headerPop” but it is having some transparency even i change the color to black i still see elements beneath it

by the way this ui is made for mobiles so it will be goofy to see if it runs in desktop so i strongly suggest to view it phone mode in web developer tools

function getBID(elementName) {
  return document.getElementById(elementName);
}

const driverImg = getBID("driverImg");
const namee = getBID("name");
const logoBox = getBID("logoBox");
const namedisc = getBID("namedisc");
const start = getBID("start");
const display = getBID("display");
const headerHamburger = getBID("headerHamburger");
const headerLogo = getBID("headerLogo");
const header = getBID("header");
const headerPopLi = document.querySelectorAll("#headerPop ul li");
const headerPop = getBID("headerPop");

driverImg.onload = function () {
  namee.style.fontSize = logoBox.offsetHeight / 2 + "px";
  driverImg.style.left = namee.offsetWidth + "px";
  logoBox.style.width = namee.offsetWidth + driverImg.offsetWidth + "px";
  logoBox.style.left = (start.offsetWidth - logoBox.offsetWidth) / 2 + "px";
  namedisc.style.width = namee.offsetWidth + "px";
  namedisc.style.top = namee.offsetHeight + "px";
};
function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function run() {
  await wait(3000);
  start.style.visibility = "hidden";
  display.style.visibility = "visible";
  headerHamburger.style.height = headerLogo.offsetHeight + "px";
  headerHamburger.style.top =
    (header.offsetHeight - headerHamburger.offsetHeight) / 2 + "px";
  const liHeight = headerPop.offsetHeight / 5;
  headerHamburger.onclick = function () {
    const d1 = window.getComputedStyle(headerPop).visibility;
    if (d1 == "visible") {
      headerPop.style.visibility = "hidden";
    } else {
      headerPop.style.visibility = "visible";
    }
  };
  headerPopLi.forEach((li) => {
    li.addEventListener("click", () => {});
    li.style.height = liHeight + "px";
    li.style.fontSize = liHeight / 2 + "px";
    if (li.innerHTML == "Home") {
      li.style.borderTop = "1px solid black";
    }
  });
}

run();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#start {
  background-color: rgba(72, 188, 132, 0.425);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#logoBox {
  position: absolute;
  height: 10%;
  top: 30%;
}
#name {
  position: absolute;
  color: rgb(72, 188, 132);
  margin: 0;
  top: 10%;
}
#driverImg {
  position: absolute;
  height: 80%;
  top: 10%;
}
#namedisc {
  font-family: "Courier New", Courier, monospace;
  position: absolute;
  color: rgb(72, 188, 132);
  text-align: center;
}

#display {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  height: 10vh;
  width: 100%;
  background-color: rgba(72, 188, 132, 0.425);
}

#headerLogo {
  position: absolute;
  height: 70%;
  top: 30%;
  left: 15%;
}

#headerHamburger {
  position: absolute;
  right: 15%;
  filter: invert(1);
}

#headerPop {
  position: fixed;
  top: 10%;
  left: 0;
  height: 27%;
  width: 100%;
  text-align: center;
  background-color: white;
  visibility: hidden;
}

#headerPop ul {
  margin: 0;
  padding: 0;
}

#headerPop ul li {
  font-family: "Courier New", Courier, monospace;
  font-weight: 800;
  color: black;
  align-content: center;
  border-bottom: 1px solid black;
}

#body {
  position: relative;
  top: 10vh;
  width: 100vw;
}

#home {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#services {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#caption {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  font-family: "Courier New", Courier, monospace;
  color: rgb(72, 188, 132);
  text-align: center;
  font-size: 2vh;
  font-weight: 800;
}

#home h1 {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  color: rgb(43, 43, 43);
  text-align: center;
  font-size: 3vh;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./mobile.css" />
  </head>
  <body>
    <div id="start">
      <div id="logoBox">
        <h1 id="name">Carnex</h1>
        <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
        <h1 id="namedisc">Book Drivers</h1>
      </div>
    </div>
    <div id="display">
      <div id="header">
        <h1 id="headerLogo">LOGO HERE</h1>
        <img src="./resources/hamburger.png" alt="hamburger icon" id="headerHamburger" />
      </div>
      <div id="headerPop">
        <ul>
          <li>Home</li>
          <li>Services</li>
          <li>become a driver</li>
          <li>About Us</li>
          <li>Contact US</li>
        </ul>
      </div>
      <div id="body">
        <section id="home">
          <div id="caption">Hire drivers with ease</div>
          <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
        </section>
        <section id="services"></section>
        <section id="aboutUs"></section>
        <section id="contactUs"></section>
      </div>
    </div>
    <script src="./mobile.js"></script>
  </body>
</html>