input::-webkit-outer-spin-button sets margin-left and only shows up in Chrome

Ok...this is very weird.

Here is the code for all of my inputs:

#sign_in input#submit {
    height: 56px;
    background-color: #88b805;
    font-weight: bold;
    text-decoration: none;  
    padding: 5px 40px 5px 40px; /* top, right, bottom, left */  
    border: 0;
    width: auto;
    -moz-border-radius: 25px;
    -khtml-border-radius: 25px;
    -webkit-border-radius: 25px;    
}

#sign_in input#submit:hover {
    -moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
开发者_StackOverflow社区    -khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
    cursor: pointer;    
}

input, textarea {
    font-size:20px; 
    display: block; 
    width: 365px; 
    height: 40px; 
    background: #273243; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; 
    color: #ffffff;
    /* margin: 0 0 0 100px;     top, right, bottom, left */ 
    padding: 5px 5px 5px 15px; /* top, right, bottom, left */
    border: 0px;
}

input:focus, textarea:focus {
    background: #313131;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; 
} 

My issue is with the submit button:

<div id="sign_in" align="center">

<form>
        <input id="name" type="text" value="Email address" required class="clearField curved" /> <br />
        <input id="password" type="text" value="Password" required class="clearField curved" /><br />   
        <input id="submit" type="submit" value="Log in" class="curved" align="center">
    </form>

</div>

Even though I have the div set to align=center, everything is centered in Chrome except the login button.

Btw, when I check it in Firefox, and Safari on a Mac it looks ok. It is just Chrome in both Windows and Mac that the submit button looks like it is flush against the left margin.

Also, when I check the properties in developer tools in Chrome, I notice something strange:

input::-webkit-outer-spin-button {
-webkit-appearance: outer-spin-button;
-webkit-user-select: none;
display: inline-block;
margin-left: 2px;
}

I am not sure why the margin-left is set to 2px. I guess I could target that specific pseudo class to override it, haven't tried that yet, but was wondering if there is another way to do it without having to do that? That seems a bit 'hackish'.

Why is it doing this and how can I fix it? I want the button to be center aligned.

Edit: I targeted that specific Pseudo selector, and tried to set the margin and nothing happened. It didn't change the layout of the button, even setting margin-left to 150px. So not sure what's happening.

---

Remove align="center" from your div element.

        #sign_in {
        width:960px;
        margin:0 auto;
    }
    #sign_in input#submit {
        height: 56px;
        background-color: #88b805;
        font-weight: bold;
        text-decoration: none;  
        padding: 5px 40px 5px 40px; /* top, right, bottom, left */  
        border: 0;
        -moz-border-radius: 25px;
        -khtml-border-radius: 25px;
        -webkit-border-radius: 25px;    
    }

    #sign_in input#submit:hover {
        -moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
        -khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
        -webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
        cursor: pointer;    
    }

    input, textarea {
        font-size:20px; 
        display: block; 
        width: 365px; 
        height: 40px; 
        background: #273243; 
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px; 
        color: #ffffff;
        /* margin: 0 0 0 100px;     top, right, bottom, left */ 
        padding: 5px 5px 5px 15px; /* top, right, bottom, left */
        border: 0px;
    margin:0 auto;
    }