HTML / CSS: Form does look different on firefox than on chrome

Question

I've got a simple form

<div class="wrapper">
<div id="form">
    <h3>Login</h3>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <fieldset>
        <legend>Login</legend>

        <label for="username">username:</label><input type="text" name="username" value="">
        <br />
        <label for="password">password:</label><input type="password" name="password" value="">
        <br />
        <input type="submit" name="login" value="submit"><br />
        </fieldset> 
    </form>
</div> 

and the css

.wrapper {
    margin-top: 180px;
}

#form {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

With this css I want to center the form.
But my major poblem is that the form looks different on Google Chrome and Mozilla Firefox. On Firefox it its larger and not centered.

On Chrome:

On Firefox:

I'm using Firefox 42.0, Google Chrome Version 46.0.2490.86 and Ubuntu 14.04.3 LTS.

Thank you very much.

Answer 1

May be firefox applying some default width for textbox. Try to add the following in your CSS so that both firefox and chrome will looks same.

 #form input:not([type=submit])
 {
   width:150px;
 }