nav gap in IE11 between two elements

Question

There is a gap between the nav bar and the HTML element below the nav bar in IE11. The styles work on Safari and Chrome. Is only on IE that it doesn't.

As you can see from the image above that a couple of pixels is added to the padding between the nav and the element below. I'm working with Sass and Tailwind. I can't find where this issue is coming from.

    <div class="js-text-controller-options c-text-controller__options hidden" id="text-controls">
        <div class='c-text-controller__languages'>
          {% do action('icl_language_selector') %}
        </div>
        <div class="c-text-controller__sizer">
          <em class="c-text-controller__sizer-text">
            {{__('Adjust text size', 'accessnyctheme')}}
          </em>
          <button class="c-text-controller__sizer-btn btn-text js-text-larger">
            <svg class="icon icon-ui-plus-circle">
              <use xlink:href="#icon-ui-plus-circle"></use>
            </svg>
            <div class="sr-only">{{__('Larger', 'accessnyctheme')}}</div>
          </button>
          <button class="c-text-controller__sizer-btn btn-text js-text-smaller">
            <svg class="icon icon-ui-minus-circle">
              <use xlink:href="#icon-ui-minus-circle"></use>
            </svg>
            <div class="sr-only">{{__('Smaller', 'accessnyctheme')}}</div>
          </button>
        </div>
      </div>
    </div>
  </div>

  <nav class="o-navigation color-dark-background">
    <div class="logo-access">
      <a href="{{ urlBase }}/">
        <svg class="icon icon-logo-full">
          <use xlink:href="#icon-logo-full"></use>
        </svg><span class="sr-only">{{__('Access NYC', 'accessnyctheme')}}</span>
      </a>
    </div>

    <nav class="o-navigation__nav nav-inline print:hidden" data-js="site-desktop-nav">{% spaceless %}
      <a class="screen-desktop:hidden" href="#o-mobile-nav" data-js="toggle-nav">
        {{__('Menu', 'accessnyctheme')}}
      </a>
      {% include 'partials/nav.twig' with {this: {style: 'hidden screen-desktop:inline-block'}} %}
      <a class="td-inherit js-toggle-search" href="#search">
        <svg class="icon icon-ui-search">
          <use xlink:href="#icon-ui-search"></use>
        </svg>
        {{__('Search', 'accessnyctheme')}}
      </a>
    {% endspaceless %}</nav>
  </nav>

  <div class="o-mobile-nav color-mid-background print:hidden" id="o-mobile-nav">
    <a class="o-mobile-nav__close" href="#o-mobile-nav" data-js="toggle-nav">
      {{__('close &amp; return to site', 'accessnyctheme')}}
      <svg class="icon icon-ui-x">
        <use xlink:href="#icon-ui-x"></use>
      </svg>
    </a>

    <div class="o-mobile-nav__inner">
      <h4 class="o-mobile-nav__header">
        {{__('Get help now', 'accessnyctheme')}}
      </h4>

      <nav class="nav-block">
        {% include 'partials/nav.twig' %}
        <a href="{{ urlBase }}/?s=">
          <svg class="icon icon-ui-search">
            <use xlink:href="#icon-ui-search"></use>
          </svg>{{__('Search', 'accessnyctheme')}}
        </a>
      </nav>
    </div>
  </div>

  <div class="o-search-box js-search-box print:hidden" id="search" aria-hidden="true">
    <div class="o-search-box__inner">
      <div class="usa-grid">
        <div class="usa-width-one-whole">
          <a class="o-search-box__close js-hide-search" href="#content">
            <svg class="icon icon-ui-x">
              <use xlink:href="#icon-ui-x"></use>
            </svg><span class="sr-only">{{__('Close search', 'accessnyctheme')}}</span>
          </a>

This is the HTML base.twig template. Here is the styles for the navigation bar.

/**
 * Nav
 */

// Dependencies
@import 'config/fonts';
@import 'config/colors';
@import 'config/typography';
@import 'config/media';
@import 'config/direction';
@import 'config/dimensions';

// Declarations
@mixin nav-icon {
  svg {
    text-decoration: none;
  }

  .icon {
    margin-#{$text-direction-end}: .3em;
    vertical-align: middle;
    margin-top: -2px
  }
}

.nav-inline {
  @include typography-nav();
  list-style: none;
  text-align: $text-direction-end;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;

  a {
    display: inline-block;
    margin-#{$text-direction-start}: 1em;
  }

  .active {
    font-weight: $font-weight-bold;
  }

  @include nav-icon;
}

.nav-block {
  @include typography-nav();
  list-style: none;
  margin: 0;
  padding: 0;

  a {
    display: block;
    border-bottom: 1px solid $color-grey-dark;
    padding: $spacing-base 0
  }

  .active {
    font-weight: $font-weight-bold;
  }

  @include nav-icon;
}

My educated guess that it has to be with an issue regarding display tag but can't seem to find where the issue lays. This is how it looks in chrome which is the desire state. Here is a JS fiddle with the base html template and some of the styles. Because of the size of the project it is very difficult to upload all the styles. https://jsfiddle.net/ky950382/2/