Centering div does not work properly with font awesome - html

Question

Problem: JSFiddle
I want to center the whole form and created a class called 'center' with the given attributes. But after adding the center class to the form in JSFiddle, the fontawesome-icons stay on the left and do not move. They should be positioned "inside" the input element left to the text. Therefore, to make place for the icon, I also added a padding on the left.
Can somebody give me the solution to fix this problem that both icons stay on the left because of centering? I really cannot find out why it is not working and it already took so much time :/
Thanks.
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
position: relative;
margin-bottom: 20px;
}
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: 0px;
border-bottom: 1px solid #ccc;
text-decoration: none;
width: 180px;
padding: 10px;
padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="center">
<form action="/login" method="POST" class="form">
<div class="box">
<i class="fa fa-user" aria-hidden="true"></i>
<input required name="username" type="text" placeholder="user">
</div>
<div class="box">
<i class="fa fa-key" aria-hidden="true"></i>
<input required name="password" type="password" placeholder="pass">
</div>
<div class="box">
<input name="submit" type="submit" value="Login">
</div>
</form>
</div>

Answer 1

The .box elements are divs and therefore naturally have a width of 100% of the parent element.
A simple solution would be to give them a fixed width equal to that of your inputs and centre them using left and right margins of auto:
.center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box {
position: relative;
margin: 0 auto 20px;
width: 180px;
}
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
.box input[type="text"],
.box input[type="password"] {
border: 0px;
border-bottom: 1px solid #ccc;
text-decoration: none;
width: 180px;
padding: 10px;
padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="center">
<form action="/login" method="POST" class="form">
<div class="box">
<i class="fa fa-user" aria-hidden="true"></i>
<input required name="username" type="text" placeholder="user">
</div>
<div class="box">
<i class="fa fa-key" aria-hidden="true"></i>
<input required name="password" type="password" placeholder="pass">
</div>
<div class="box">
<input name="submit" type="submit" value="Login">
</div>
</form>
</div>

Answer 2

it occurs because
.box .fa {
position: absolute;
top: 10px;
left: 5px;
}
you can use position initial for it.