Erro no logo da appeperia

Acredito que no momento de passar os mediaquerys devo ter errado alguma coisa, mas so percebi no dia seguinte e agora não sei qual parte do codigo esta errada. O problema é que o logo da appeperia está parcialmente em cima do menu de navegação :/

CSS do header:

/** Header **/
header {
  border-top: 5px solid $corPadrao;
  background: rgba($corAuxiliar, 0.8);
  height: 90px;
  width: 100%;
  position: absolute;

  @media #{$mq-mobile} {
    height: auto; 
  }

  h1 {
    max-width: 50%;
    margin: 0 auto;
    img {
      max-width: 100%;
      margin: 0.5em auto;
      display: block; }
  }
}

header .container {
  position: relative;

  @media #{$mq-mobile} {
    position: static;
  }
}

.menu-principal {
  position: absolute;
  right: 0;
  top: -.5em;
  font-size: 1.2em;
  font-weight: lighter;

  ul {
    padding-left: 0;
  }

  li {
    display: inline-block;
    width: 5em;
  }

  a {
    color: white;
    text-decoration: none;

      &:hover {
      text-decoration: underline;
      }
  }

  @media #{$mq-mobile} {
    position: static;
    display: block;
    text-align: center;
      form {
        width: auto;
      }
      li form {
        width: auto;
      }
  }

  li {
    margin: .4em;
  }
}

Caso necessário segue o link em .rar do arquivo completo: https://drive.google.com/open?id=1eaYyyA9y10kpOtn6SHlTyNCz7iyiz3ku