<%= title('Settings') %>

<div class="gradient pb-1">
  <div class="container">
    <h1 class="text-center accent page-heading-title">Settings</h1>
    <div class='col-lg-10 offset-lg-1'>

      <%= render 'devise/registrations/profile', user: @user %>
      <%= render 'devise/registrations/learning_goal', user: @user %>

      <% unless @user.user_providers.any? %>
        <%= render 'devise/registrations/password', user: @user %>
      <% end %>

      <%= render 'devise/registrations/danger_zone', user: @user %>

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

<%= title('Settings') %>

<div class="gradient pb-1">
  <div class="container">
    <h1 class="text-center accent page-heading-title mx-auto">Settings</h1>
    <div class='col-lg-10 offset-lg-1'>

      <%= render 'devise/registrations/profile', user: @user %>
      <%= render 'devise/registrations/learning_goal', user: @user %>

      <% unless @user.user_providers.any? %>
        <%= render 'devise/registrations/password', user: @user %>
      <% end %>

      <%= render 'devise/registrations/danger_zone', user: @user %>

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

Add mx-auto class to setting page's heading
Add mx-auto class to setting page's heading
