Centering div does not work properly with font awesome

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>