.application-wrapper {
  display: grid;
  grid-template-areas:
  'header'
  'loading'
  'nav'
  'main'
  'footer';
  grid-template-rows: 60px 10px auto 1fr 20px;
  height: 100vh;
  width: 100vw;

  @include for-laptop-and-up {
    grid-template-areas:
    'header  header'
    'nav  loading'
    'nav main'
    'footer footer';
    grid-template-columns: 200px auto;
    grid-template-rows: minmax(60px, auto) 10px 1fr auto;
  }
  @include for-desktop-and-up {
    grid-template-areas:
    'header header  header'
    'nav loading  loading'
    'nav    main main'
    'footer footer  footer';
    grid-template-columns: 240px 1fr 1fr;
  }

  & > header {
    grid-area: header;
  }

  & > .loading-bar {
    grid-area: loading;
  }

  & > nav {
    grid-area: nav;
  }

  & > main {
    background-color: $white;
    grid-area: main;
    @include for-laptop-and-up {
      margin-left: 10px;
    }
  }

  & > footer {
    grid-area: footer;
  }
}

.application-wrapper {
  display: grid;
  grid-template-areas:
  'header'
  'loading'
  'nav'
  'main'
  'footer';
  grid-template-rows: 60px 10px auto 1fr 20px;
  height: 100vh;
  width: 100vw;

  @include for-laptop-and-up {
    grid-template-areas:
    'header  header'
    'nav  loading'
    'nav main'
    'footer footer';
    grid-template-columns: 200px auto;
    grid-template-rows: minmax(60px, auto) 10px 1fr auto;
  }
  @include for-desktop-and-up {
    grid-template-areas:
    'header header  header'
    'nav loading  loading'
    'nav    main main'
    'footer footer  footer';
    grid-template-columns: 240px 1fr 1fr;
  }

  & > header {
    grid-area: header;
  }

  & > .loading-bar {
    grid-area: loading;
  }

  & > nav {
    grid-area: nav;
  }

  & > main {
    background-color: $white;
    grid-area: main;
    margin: 0 5px;
  }

  & > footer {
    grid-area: footer;
  }
}

Add some space to main
Add some space to main

This exposes the border and a bit of white space which is nice.
