Images appearing in front of menu - html

Question

I am making a website and I have a small bug where the images in one section appears in front of my menu. I tried to play around the z-index value but nothing worked for me. Here is what it looks like
I would like the images to be under the menu as-per, but it does not seem to function properly and I cannot detect the problem, can someone help me out with this?
HTML:
<section id="portfolio">
<div class="container">
<h1>MY WORK</h1>
<h2>Below you will find my favorite projects & school assignments</h2>
<!--CPU-->
<div class="project">
<div class="img-box">
<img src="./img/cpu.png">
<div class="hovertext">Test Text 1</div>
</div>
</div>
<!--JAVA-->
<div class="project">
<div class="img-box">
<img src="./img/JSON.png">
<div class="hovertext">Test Text 2</div>
</div>
</div>
<!--PHOTOSHOP-->
<div class="project">
<div class="img-box">
<img src="./img/photoshop.png">
<div class="hovertext">Test Text 3</div>
</div>
</div>
CSS:
#portfolio {
background-color: : white;
padding-bottom: 100px;
}
#portfolio h1 {
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2 {
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project {
display: inline-block;
width: 33.33%;
margin-right: -4px;
}
.img-box {
padding: 20px;
position: relative;
}
.project img {
width: 100%;
display: block;
border-radius: 12px;
}
.img-box img:hover {
transform: scale(1.1);
transition: 0.5s;
opacity: 0.5;
}
.img-box .hovertext {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-box:hover .hovertext {
display: block;
}

Answer 1

I did not test but maybe will work.
<div class="container" style="z-index: -999999">