I've searched through similar questions, but none of the suggested solutions seem to work for my issue.
The problem I'm facing is that the closing button on my modal isn't functioning properly and the content inside it is not aligning correctly. (Update: After adding a border, I noticed a strange square occupying space below the "X" button, but I still can't figure out why)
It appears that both issues are intertwined, possibly linked with the padding at the top, but I'm unable to resolve it. Any assistance would be greatly appreciated.
https://i.sstatic.net/8C8gF.png
.mobile-menu {
float: right;
padding: 1.1em 0.6em 0.1em 0.9em;
border: 1px solid;
}
.mobile-menu-modal {
z-index:3;
display:none;
padding-top:85px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
}
.mobile-menu-modal-content{
margin-right:10%;
margin-left: auto;
background-color:#fff;
position:relative;
padding:0;
width:40%;
}
.mobile-menu-a {
text-align:center;
display:block;
font-weight:bold;
font-size:1.2em;
border-bottom:1px solid #eee;
padding: 0.5em;
}<a class="mobile-menu" onclick="document.getElementById('mobilemenu').style.display='block'">Menu Button
<div id="mobilemenu" class="mobile-menu-modal">
<div class="mobile-menu-modal-content">
<span onclick="document.getElementById('mobilemenu').style.display='none'" style="float:right;font-size:2em;cursor:pointer;">×</span>
<div class="clearfix"></div>
<div style="padding-top:5em">
<a class="mobile-menu-a">200K+</a>
<a class="mobile-menu-a">300K+</a>
<a class="mobile-menu-a">400K+</a>
<a class="mobile-menu-a">1M+</a>
</div>
</div>
</div>
</a>