bootstrap ログイン画面右寄せにしたい

rubu on rails で bootstrapを使ってログイン画面を作ったのですが、今ログイン画面がセンターにあるので右寄せにしたいのですが、うまくできないないのでどなたかお力を貸していただけませんか？```ruby on rails new.html.erb
コード


    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">

                <div class="form-user style-1 rounded has-shadow-1">
                    <div class="form-header text-center">
                        <h2 class="form-header-title">ユーザー登録</h2>
                    </div>
                    <div class="form-body">

                     <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>
    <div class="form-group has-icon">
        <label class="control-label sr-only" for="inputEmail">Name</label>
        <%= f.text_field :name, autofocus: true, class:"form-control", id:"inputName", placeholder:"名前"%>
        <span class="fa fa-user form-control-icon" aria-hidden="true"></span>
    </div>
    <div class="form-group has-icon">
        <label class="control-label sr-only" for="inputEmail">Email</label>
        <%= f.email_field :email, class:"form-control", id:"inputEmail", placeholder:"メールアドレス"%>
        <span class="fa fa-envelope form-control-icon" aria-hidden="true"></span>
    </div>
    <div class="form-group has-icon">
        <label class="control-label sr-only" for="inputEmail">Password</label>
        <%= f.password_field :password, autocomplete: "off", class:"form-control", id:"inputPassword", placeholder:"パスワード" %>
        <span class="fa fa-lock form-control-icon" aria-hidden="true"></span>
    </div>
    <div class="form-group has-icon">
        <label class="control-label sr-only" for="inputEmail">Password</label>
        <%= f.password_field :password_confirmation, autocomplete: "off", class:"form-control", id:"inputConfirmPassword", placeholder:"パスワード確認" %>
         <span class="fa fa-check-circle-o form-control-icon" aria-hidden="true"></span>
    </div>
        <%= f.submit "ログイン", class:"btn btn-lg btn-block btn-base-1 mt-20" %>
    <% end %>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように空のレイアウトを追加してみてはいかがでしょうか．

HTML
1<section class="slice slice-lg sct-color-1">
2
3    <div class="container">
4        <div class="row">
5            <!-- ここに空のレイアウトを追加 -->
6            <div class="col-md-8">
7            </div>
8            <!-- 以下そのまま -->
9            <div class="col-md-4">
10
11                <div class="form-user style-1 rounded has-shadow-1">
12                    <div class="form-header text-center">
13                        <h2 class="form-header-title">ユーザー登録</h2>
14                    </div>
15                    <div class="form-body">
16                        <!-- 中略 -->
17                    </div>
18                </div>
19            </div>
20        </div>
21    </div>
22</section>