Bootstrapのformを中央に配置できない。

問題

Bootstrapのformタグで導入したフォームを、labelとの位置関係はそのまま中央に配置したいのですが、なかなかうまくいきません。

HTML
1<form>
2  <%= form_for(@user, url: yield(:url)) do |f| %>
3    <%= render 'shared/error_messages' %>
4
5    <div class="form-group">
6        <%= f.label :name %>
7        <%= f.text_field :name, class: 'form-control w-50' %>
8    </div>
9    <div class="form-group">
10      <%= f.label :email %>
11      <%= f.email_field :email, class: 'form-control w-50' %>
12    </div>
13    <div class="form-group">
14      <%= f.label :password %>
15      <%= f.password_field :password, class: 'form-control w-50' %>
16    </div>
17    <div class="form-group">
18      <%= f.label :password_confirmation%>
19      <%= f.password_field :password_confirmation, class: 'form-control w-50' %>
20    </div>
21    <%= f.submit yield(:button_text), class: "btn btn-primary" %>
22  <% end %>
23</form>

Sass
1@import 'bootstrap';
2
3 $main-blue:#428bca;
4 $light-gray:#777777;
5
6 li{
7   list-style: none;
8 }
9
10
11.dropdown-item{
12   color:$main-blue;
13 }
14
15.page-title{
16  margin-top:40px;
17  text-align: center;
18}
19
20
21
22.btn{
23  margin-top: 10px;
24}
25
26 .footer{
27   margin-top: 100px;
28   border-top: 1px solid $main-blue;
29   small{
30     float:left;
31     color:$main-blue;
32   }
33   ul{
34     float:right;
35   }
36   li{
37     float:left;
38     margin-left: 15px;
39   }
40   a{
41     color:$main-blue;
42   }
43 }
44