I've been struggling with adding a div wrapper around the title of a popup on my index page. I'm attempting to align it horizontally and add a margin-top, but my efforts aren't yielding the desired results. The div also fails to touch the start of the popup, resulting in an unwanted horizontal scrollbar.
Furthermore, the inputs within the same popup are refusing to center horizontally. Despite placing them inside a wrapper and setting a width along with margin: 10px auto, they remain misaligned.
If you'd like to see this issue firsthand, please visit my website at sundayfundayleague.com. Click the Sign In button to trigger the popup.
What am I missing here?
<div id="light" class="signInpopup"> <a class="close" href="javascript:void(0)">Close</a>
<div id="indexpopupTitleWrap"> <span id="indexpopupTitle">Sign In</span>
</div>
<form id="signInform" name="Sign In" action="" method="POST" autocomplete="on" accept-charset="utf-8">
<div id="signInformWrap">
<input type="text" name="username" id="signInInput" placeholder="Username" autocomplete="on" required>
<br>
<input type="password" name="password" id="signInPasswordInput" placeholder="Password" autocomplete="off" required>
<br>
<br>
<br>
<label for="remember">
<input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<label for="widebutton">
<input id="widebutton" type="submit" value="Sign In">
</label>
<br>
<br>
</div>
</form>
CSS
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.lighter_black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
}
.white_content {
display: none;
position: fixed;
top: 27.5%;
left: 27.5%;
width: 45%;
padding: 6px;
background-color: white;
z-index:1002;
overflow: auto;
}
.close {
float: right;
margin-right: 2px;
color: #909090;
text-decoration: none;
}
.close:hover{
color: #686868;
text-decoration: underline;
}
#indexpopupTitleWrap {
width: 100%;
height: 100px;
background-color: #282828;
}
#indexpopupTitle {
font-size: 2.5em;
text-align: center;
margin-top: 25px auto;
padding: 10px;
color: #800000;
}
#signInformWrap {
width: 800px;
height: 300px;
}
#signInInput[type=text] {
width: 400px;
margin: 10px auto;
font-size: 18px;
padding: 10px;
}
#signInPasswordInput[type=password] {
width: 400px;
margin: 10px auto;
font-size: 18px;
padding: 10px;
}
.signInpopup {
width: 100%;
padding: 5px 0;
border-radius: 10px;
border: 3px solid #4D4D4D;
background-color: #FFFFFF;
margin: auto;
display: none;
position: fixed;
top: 27.5%;
left: 27.5%;
width: 45%;
height: 45%;
padding: 6px;
z-index:1002;
overflow: auto;
}