Как исправить пробему с тем, что блок накладывается на меню?

Question

Joulence @Joulence

Раньше изучал веб, теперь python

HTML
CSS

Как исправить пробему с тем, что блок накладывается на меню?

Верстаю страницу и возникла проблема следующая:
Есть код который отвечает за "header", который меняется в такую менюшку

И одновременно с этим есть блок, при наведение которого появляется текст

и проблема в том, что этот блок наваливается на меню и всё портит

Код менюшки:
HTML

<div id="mySidebar" class="sidebar">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Servicing</a>
                    <a href="#">Portfolio</a>
                    <a href="#">Blog</a>
                    <a href="#">Contact</a>
                  </div>
                  
                  <div class="mainBar" id="main">
                    <button class="openbtn" onclick="openNav()"><i class="fas fa-bars"></i></button>
                  </div>

CSS

.sidebar {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
  }
  
  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #f1f1f1;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn {
    cursor: pointer;
    border: none;
    background: unset;
  }
  
  .mainBar {
    transition: margin-left .5s; /* If you want a transition effect */
    padding: 20px;
    display: none;
  }

  .fa-bars {
    color: black;
    font-size: 30px;
  }

JS

function openNav() {
  document.getElementById("mySidebar").style.width = "255px";
  document.getElementById("main").style.marginLeft = "105px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Код блока с текстом:
HTML

<div class="latest_works">
                    <div class="container">
                        <div class="filterDiv developing">
                            <div class="filterGame_1">
                                <img src="img/latest/game.jpg" alt="">
                                <div class="GameTest">
                                    <h2>Codename:<br>"Text GungeonGame"</h2>
                                </div>
                            </div>
                        </div>
                      </div>

                    </div>

CSS

.filterGame_1 {
    position:relative;   
}
.GameTest{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
    background:rgba(20, 20, 20, 0.7);
    display:none;
}
.filterGame_1:hover .GameTest{
    display:block;
}

И вот как бы всё это исправить, при этом не сломать ничего?