Cria espaçamento extra mesmo com Overflow-x em body e html

Boa noite pessoal.

Estou tendo problemas com o espaço extra gerado pelo elemento após aplicar o rotate e translate e seus valores. Mesmo aplicando a propriedade overflow-x: hidden nos seletores body e html o problema persiste, segue as infos:

index.css

 .banner-twitter {
    background-color: #3C1D3D;
    font-size: 1.1rem;
    padding: 1em;
    width: 15em;
    text-align: center;
    border: .3em solid black;
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 0 0;
    transform: translate(7em, -3em)
    rotate(40deg);
    margin: 0;
    font-family: "Open Sans Condensed", sans-serif;
} 

site.css

html {
    font-size: 120%;
    overflow-x: hidden;
}  body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
    overflow-x: hidden;
}