Problema com o sprite do compass

Eu estou tentando usar os sprites para as redes sociais, como sugerido ao final da aula 8, mas o procedimento que o instrutor ensinou não funcionou como esperado: o logo do instagram aparece cortado. No arquivo que eu tenho, as imagens tem as seguintes dimensões:

• facebook: 45 X 45
• Twitter: 55 X 55
• instagram: 128 X 128

O problema é que a imagem do instagram é maior que a imagem do facebook e twitter?

O meu arquivo footer.scss ficou assim:

/** Footer **/
footer {
  display: block;
  position: relative;
}

footer::after {
  content: "";
  background: url(../imagens/fundo-rodape.png);
  opacity: .02;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

footer::before {
  content: "";
  background: $cor-auxiliar;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

footer .container {
  padding-top: 3em;
  height: 6.5em;
  position: relative;

  img {
    width: 250px;
  }
}


.menu-rodape,
.social {
  position: absolute;
}

.menu-rodape ul li {
  display: inline-block;
  margin-left: 2em;
}

.menu-rodape {
  top: 1em;
  right: 0;
}

.social {
  bottom: 0;
  right: 0;
}

.menu-rodape li,
.social li {
  display: inline;
}

footer a {
  color: $cor-branca;
  text-decoration: none;
}

.social li {
  float: left;
}

// .social li a {
//   display: block;
//   // width: 55px;
//   // height: 50px;

//   @extend %image-replacement;

//   margin-left: 1em;
// }

// .social a {
//   background-position: top;
//   background-size: 50px 50px;
// }


@include all-plataformas-sprites;
.plataformas-facebook, .plataformas-instagram, .plataformas-twitter{
  width: 55px;
  height: 50px;

  display: block;

  @extend %image-replacement;

  margin-left: 1em;  
}

// .social a[href*="facebook"] {
//   background-image: url(../imagens/facebook.png);
// }

// .social a[href*="twitter"] {
//   background-image: url(../imagens/twitter.png);
// }

// .social a[href*="instagram"] {
//   background-image: url(../imagens/instagram.png);
// }

Com esse footer.scss acima aqui no meu computador fica aparecendo assim: footer com problemas.

Eu fiquei mexendo no chrome e cheguei na solução que está abaixo. Mas eu não gostei dessa solução, porque eu mudei a propriedade background-position que o compass cria automaticamente com os sprites. Tem outro jeito de fazer o logo do instagram aparecer inteiro?

/** Footer **/
footer {
  display: block;
  position: relative;
}

footer::after {
  content: "";
  background: url(../imagens/fundo-rodape.png);
  opacity: .02;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

footer::before {
  content: "";
  background: $cor-auxiliar;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

footer .container {
  padding-top: 3em;
  height: 6.5em;
  position: relative;

  img {
    width: 250px;
  }
}


.menu-rodape,
.social {
  position: absolute;
}

.menu-rodape ul li {
  display: inline-block;
  margin-left: 2em;
}

.menu-rodape {
  top: 1em;
  right: 0;
}

.social {
  bottom: 0;
  right: 0;
}

.menu-rodape li,
.social li {
  display: inline;
}

footer a {
  color: $cor-branca;
  text-decoration: none;
}

.social li {
  float: left;
}

// .social li a {
//   display: block;
//   // width: 55px;
//   // height: 50px;

//   @extend %image-replacement;

//   margin-left: 1em;
// }

// .social a {
//   background-position: top;
//   background-size: 50px 50px;
// }


@include all-plataformas-sprites;
.plataformas-facebook, .plataformas-instagram, .plataformas-twitter{
  width: 55px;
  height: 50px;

  display: block;

  @extend %image-replacement;

  margin-left: 1em;  
}

.plataformas-instagram {
  width: 64px;
  height: 56px;
  background-size: 90% 96px;
  background-position: 0px -20px;
}

// .social a[href*="facebook"] {
//   background-image: url(../imagens/facebook.png);
// }

// .social a[href*="twitter"] {
//   background-image: url(../imagens/twitter.png);
// }

// .social a[href*="instagram"] {
//   background-image: url(../imagens/instagram.png);
// }

O footer depois de ficar mexendo no chrome ficou assim: footer sem problemas.

PS: Eu tentei colocar um imagem aqui no Fórum, mas não consegui. Por isso eu coloquei os arquivos no meu dropbox. Seria interessante se a gnt pudesse colar ou anexar imagens aqui no Fórum...