Witam.
Borykam się z banalnym problemem, otóż chcę zrobić przyklejone menu logowania w poziomie. Jestem w momencie gdzie nie mogę wyśrodkować samego formularza type=text (login i hasło), ponieważ gdy używam funkcji display-block i margin-left auto, margin-right:auto formularz układa się jeden pod drugim (jest wyśrodkowany, lecz chcę aby login i hasło było w poziomie). Czego mi brakuję?

<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8">
<style>
body
{
background-image: url(img/wallpaper.png);
color:black;
margin:0px;
}
#container
{
background-color:#1E7BC1;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 80px;
width: 100%;
-webkit-box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
-moz-box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
}
.center
{
height: 80px;
width: 400px;
margin-left: auto;
margin-right: auto;
}
input[type=text]
{
width: 50px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
input[type=submit]
{
margin-top: 15px;
margin-left: auto;
margin-right: auto;
width: 100px;
display: block;
}
</style>
</head>
<body>
<div id="container">
<div class="center">
<form>
<input type="text" value="login">
<input type="text" value="haslo" >
<input type="submit" value="Zaloguj się">
</form>
</div>
</div>
</body>
</html>