Liebling Footer Formatting w/ added social media icons

Developer help
1

Hi Ghost Community,

I have very little coding experience and no in-house developer. I’m hoping someone can help identify what’s wrong with my code. I’m using the Liebling theme and we are not self-hosting or doing anything fancy. I’ve downloaded the theme and have been using Visual Studio to adjust small aspects of the theme like removing the dark mode button and customizing the footer.

In the footer, I was able to add LinkedIn and Instagram. Somehow in this process I have lost the original stacked formatting where the Secondary Navigation Menu is above the Social Media Icons which are above the copyright and JS licensing links.

I’ve compared my code with the original theme and can’t find where I went wrong. Anyone got any hints?

Thanks!

Using Version: [5.36.1]

<footer class="m-footer">
  <div class="m-footer__content">
    {{#if @site.secondary_navigation}}
      <nav class="m-footer__nav-secondary" role="navigation" aria-label="{{t "Secondary menu in footer"}}">
        {{navigation type="secondary"}}
        </nav>
      <nav class="m-footer-social">
        <a href="https://www.linkedin.com/company/the-diversity-movement" target="_blank" rel="noopener" aria-label="Linkedin">
          <span class="icon-linkedin" aria-hidden="true"></span>
        </a>
        <nav class="m-footer-social">
        <a href="https://www.instagram.com/thediversitymovement/" target="_blank" rel="noopener" aria-label="Instagram">
          <span class="icon-instagram" aria-hidden="true"></span>
        </a>
      {{/if}}
      {{#if @site.twitter}}
        <a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
          <span class="icon-twitter" aria-hidden="true"></span>
        </a>
      {{/if}}     
      {{#if @site.facebook}}
        <a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
          <span class="icon-facebook" aria-hidden="true"></span>
        </a>
      {{/if}}
      <a href="{{@site.url}}/rss" aria-label="RSS">
        <span class="icon-rss" aria-hidden="true"></span>
      </a>
    </nav>
    <p class="m-footer-copyright">
      <span>{{@site.title}} &copy; <a href="https://thediversitymovement.com/copyright-notice/" target="_blank" rel="noopener">{{date format="YYYY"}}</a></span>
      <span>&nbsp; &bull; &nbsp;</span>
      <span>{{t ""}} <a href="https://thediversitymovement.com/privacy-policy/" target="_blank" rel="noopener">Privacy</a></span>
      <span>&nbsp; &bull; &nbsp;</span>
      <span>{{t ""}} <a href="https://thediversitymovement.com/terms-of-use/" target="_blank" rel="noopener">Terms of Use</a></span>
    </p>
  </div>
</footer>```