怎么处理我的css下拉菜单上的差距？

I badly need help with my css coding. newbie here.

#accountTitle
padding: 0;
display: block;
margin-top: 90px;
margin-bottom: -120px;
margin-left: 50px;
font-size: 36px;


a:active 
background-color: #a6d8a8;




table 
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 50px;
overflow-x:auto;


 td 
  text-align:left;

   th, td

padding: 15px;



th 
    background-color: #4CAF50;
    color: white;
    text-align: center;



tr:hover 
background-color: #a6d8a8;
cursor: pointer;




#container 
margin-top: 135px;
position: relative;
padding: 0;
overflow: hidden;
background-color: #333;
border-radius: 10px;
width: 100%;




.wrap
margin-right: 10px;
text-align: center;



.dropbtn

background-color: #333;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;



.dropdown 
position: relative;
display: inline-block;
margin-right: 5px;



   .dropdown-content 

    display: none;
    position: fixed;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;


     .dropdown-content a 
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;


        .dropdown-content a:hover 
         background-color: #f1f1f1

         .dropdown:hover .dropdown-content
          display: block;



          .dropdown:hover .dropbtn 
           background-color: #434343;



<label id="accountTitle">Audit Log</label>
<div id="container">
<div class="wrap">
<div class="dropdown">
<button class="dropbtn" id="homebtn">Home</button>
<div class="dropdown-content">
<a href="#">Main Page</a>
<a href="#">Accounts</a>
<a href="#">Audit Log</a>
<a href="#">Logout</a>
</div>
</div>

The problem here is that, whenever I scroll down this happens

please i really need to finish this.

take the overflow out of #container and change the position on .dropdown-content to absolute

#container {
    ...
    padding: 0;
    /* overflow: hidden; DELETE THIS */
    background-color: #333;
    ...
}

.dropdown-content {
    display: none;
    position:  absolute;
    ...
}

Reduce the padding of .dropdown-content a should be like this

   .dropdown-content a 
{
      color: black;
      padding: 0px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
}

I do not understand the problem very well but if the problem is that dropdown is not appearing at all then you have to change your .dropdown:hover .dropdown-content like this.

.dropdown:hover .dropdown-content{
      display: block;
      z-index: 1;
 }

z-index change html rendering priority according to the number it has, the bigger number is the bigger the priority is.