Shopify Footer Grid - Size and Align Content - html

Question

I'm working on my Shopify using the Brooklyn theme. I need help with my footer adjustments. I can't seem to get the footer to be shorter in height. There's so much empty space in there. In the attached photo, you can see I have two columnns. The one on the left has two piece of content and the one on the right has one. How can I push all three of these out to the edge? I tried to set the padding and margins to 0...but it doesn't work. I want it closer to the outside rather than leaving a big space on both sides.
Thank you!
Footer Image
<footer class="site-footer small--text-left" role="contentinfo">
<div class="grid">
{% comment %}
Default to 1 footer column (copyright/powered_by/payment_types)
{% endcomment %}
{% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
{% if section.settings.footer_newsletter_enable %}
{% assign num_footer_columns = 0 %}
{% else %}
{% assign num_footer_columns = 1 %}
{% endif %}
{% if section.settings.footer_newsletter_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
Create an extra menu column if link list has more than 5 links
{% endcomment %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
{% comment %}
We have a Footer menu that isn't empty, we will need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% assign extra_footer_linklist_column = false %}
{% assign footer_linklist_count = linklists[section.settings.footer_link_list].links.size %}
{% if footer_linklist_count > 5 %}
{% assign extra_footer_linklist_column = true %}
{% comment %}
We split the links so we'll need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
If we have an odd amount of links, we need to show 1 more link in 1st column
{% endcomment %}
{% assign extra_link = footer_linklist_count | modulo: 2 %}
{% comment %}
We start with a 2nd column after first column is filled up.
{% endcomment %}
{% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
{% endif %}
{% comment %}
Determine whether there are social links
{% endcomment %}
{% assign footer_social_enable = false %}
{% if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_google_plus_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or settings.social_fancy_link != blank
or settings.social_snapchat_link != blank
%}
{% assign footer_social_enable = true %}
{% endif %}
{% comment %}
Calculate the number of footer columns shown. Default to 1.
{% endcomment %}
{% if footer_social_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% case num_footer_columns %}
{% when 0 %}
{% when 1 %}
{% assign footer_column_width = '' %}
{% when 2 %}
{% assign footer_column_width = 'one-half small--one-whole' %}
{% when 3 %}
{% assign footer_column_width = 'one-third small--one-whole' %}
{% when 4 %}
{% assign footer_column_width = 'large--one-quarter medium--one-half' %}
{% endcase %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets site-footer__linklist">
{% for link in linklists[section.settings.footer_link_list].links %}
{% comment %}
Create a second column
{% endcomment %}
{% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
</ul>
</div>
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets site-footer__linklist">
{% endif %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if footer_social_enable %}
{% comment %} Added the if statement for the class and made the div a grid item by Ludo S on July 16 2018 {% endcomment %}
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets social-icons">
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
{% if section.settings.footer_newsletter_enable %}
<div class="customNewsletter grid__item{% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}{% if num_footer_columns == 4 %} narrow-newsletter{% endif %}">
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<div class="newsletter--form">
<div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
</div>
{% else %}
<label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter--form">
<p class="h2" style="color:{{ section.settings.newsletter_text_color }}">Stay in touch!</p><br>
<p class="h6" style="color:{{ section.settings.newsletter_text_color }}">Get updates on our newest styles.</p>
<div class="input-group">
<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
<span class="input-group-btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
<span class="newsletter__submit-text--small">
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</span>
</button>
</span>
</div>
</div>
{% endif %}
{% endform %}
</div>
{% endif %}
<div class="grid grid__item one-half push--large--one-quarter push--medium--one-quarter small--one-whole">
<p style="color:white">© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}<br>Powered by Caffeine + Doggie Kisses</p></p>
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
</div>
</div>