I checked similar questions, but the solutions suggested didn't work for me.
The problem is that my modal closing button is not working and the contents inside it is not aligning. (Update: When I turned on the border, I found out that a weird square is taking the space below "X", but still can't figure out why)
I think both issues are somehow related, along with the padding at the top, but I can't figure it out. Any help will be so much appreciated.
.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>