Having positioning and div issues

Question

I have a popup on my index page that I am trying to add a div wrap around the title and then auto align that horizontally and add a margin-top to it, but for some reason it is not responding what I am trying to do. With that same div I cannot get it to completely touch the start of the popup and it adds a horizontal scroll bar.

Then my inputs in that same popup, I cannot get them to center horizontally. I did the same and put them inside a wrapper and added a width to them and tried to do margin: 10px auto;, but it does nothing.

To make this easier to see, feel free to go to my site, sundayfundayleague.com . Click the Sign In button and the pop up will appear.

What am I not doing right with this?

<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;
}

Answer 1

Your input elements are display:inline-block;. Change them to display:block to center them. However, I would do the following instead:

#signinformwrap { width: 400px; margin: 0 auto; }