Fixed issue with social media icons being off centered by default

[LandonPatmore]

When using the default:

  {% if site.social_media %}
  <div
    class="d-flex flex-wrap flex-items-start {% if site.layout == 'stacked' %}flex-justify-center mt-1 mt-md-3{% endif %}">
    {% for account in site.social_media %}
    <div class="mr-3 mb-3 smedia-icon">
      {% assign service_shortname = account[0] %}
      {% assign service = site.data.social_media[service_shortname] %}
      <a href="{{ service.profile_url_prefix }}{{ account[1] }}" title="{{ service.name }}: {{ account[1] }}"
        class="tooltipped tooltipped-s" aria-label="{{ service.name }}: {{ account[1] }}">
        {{ service.icon_svg }}<span class="d-none">{{ service.name }}</span>
      </a>
    </div>
    {% endfor %}
  </div>
  {% endif %}

inside of masthead.html, the icons are pushed left and off centered.

I added a fix so that the icons are centered properly.

Old:

New:

[brandonrosage]

I've replaced the custom CSS with a Liquid condition that omits the mr-3 utility class on the last item. Cool?

[LandonPatmore]

@brandonrosage Huh, didn't know liquid could do that. Yah that is awesome! But you are going to hate me for this, but the Github name, email, and location also have the same exact issue. I noticed this after the fact.

[brandonrosage]

@landonp1203 Thanks for catching that! Got it fixed 👍