How to center text on the account log in page?

[ES_Sabers]

Hi,

I am having an issue centering the text shown on the account log in page for the forgot password link. 

I have checked the coding but am I missing something

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--one-half medium-up--push-one-quarter">
<div class="form-message form-message--success hide" id="ResetSuccess" tabindex="-1">
{{ 'customer.recover_password.success' | t }}
</div>

<div id="CustomerLoginForm" class="form-vertical">
<h1 id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>

{% form 'customer_login', novalidate: 'novalidate' %}
{%- if form.errors -%}
<div class="form-message form-message--error">
<h2 class="h3 form-message__title " tabindex="-1" data-form-status>
{{ 'contact.form.error_heading' | t }}
</h2>
{{ form.errors | default_errors }}
</div>
{%- endif -%}

<label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
<input
type="email"
name="customer[email]"
id="CustomerEmail"
autocomplete="email"
autocorrect="off"
autocapitalize="off"
{%- if form.errors contains 'form' -%}
class="input--error"
aria-invalid="true"
{%- endif -%}
>

{% if form.password_needed %}
<label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
<input
type="password"
value=""
name="customer[password]"
id="CustomerPassword"
{%- if form.errors contains 'form' -%}
class="input--error"
aria-invalid="true"
{%- endif -%}
>
{% endif %}

<div class="text-center">
{% if form.password_needed %}
<p>
<a href="#recover" id="RecoverPassword">{{ 'customer.login.forgot_password' | t }}</a>
</p>
{% endif %}

<input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">

<p>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</p>
</div>
{% endform %}
</div>

<div id="RecoverPasswordForm" class="hide">
<div class="text-center">
<h2 id="RecoverHeading">{{ 'customer.recover_password.title' | t }}</h2>
<p>{{ 'customer.recover_password.subtext' | t }}</p>
</div>

<div class="form-vertical">
{% form 'recover_customer_password' %}
{% comment %}
Add a hidden span to indicate the form was submitted succesfully.
{% endcomment %}
{% if form.posted_successfully? %}
<span class="hide reset-password-success"></span>
{% endif %}

<label for="RecoverEmail">{{ 'customer.recover_password.email' | t }}</label>
<input
type="email"
value=""
name="email"
id="RecoverEmail"
class="input-full{% if form.errors %} input--error{% endif %}"
autocorrect="off"
autocapitalize="off"
{% if form.errors %}
aria-invalid="true"
aria-describedby="RecoverEmail-email-error"
{%- endif -%}
>
{%- if form.errors -%}
<span id="RecoverEmail-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.messages.form }}</span>
</span>
{%- endif -%}

<div class="text-center">
<p>
<input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
</p>

<a href="#LoginHeading" id="HideRecoverPasswordLink">{{ 'customer.recover_password.cancel' | t }}</a>
</div>
{% endform %}
</div>
</div>

{% comment %}
If accounts are set as optional, the following will be shown as an option
during checkout, not on the default /login page.
{% endcomment %}
{% if shop.checkout.guest_login %}
<div class="text-center">
<hr class="hr--invisible">
<h2>{{ 'customer.login.guest_title' | t }}</h2>

{% form 'guest_login' %}
<input type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
{% endform %}
</div>
{% endif %}
</div>
</div>
</div>

Any help would be appreciated. Thanks,

James

[APG-David]

I'm NOT a techie. 

But this is what I used on our contact page to center our text. 

It's only HTML. Nothing fancy. But it works. 

If twer me.. I'd wrap this code around the statement you are trying to center.

<div style="text-align: center;"> Forgot your password? <div style="text-align: center;"></div>

Note: I edited the post to make it simpler.

[ES_Sabers]

Thanks for taking a look.

I think it is this section, just unsure why it hasn't centred it has "text-center" but I will try the HTML you suggested. Appreciate it!

<div class="text-center">
{% if form.password_needed %}
<p>
<a href="#recover" id="RecoverPassword">{{ 'customer.login.forgot_password' | t }}</a>
</p>
{% endif %}

<input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">

<p>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</p>
</div>

[Moeed]

Hey @ES_Sabers 
Kindly share your Store URL and Password if enabled

[ES_Sabers]

You can find it here on our store https://www.es-sabers.co.uk/account/login

Thanks!