banner esta criando mais espaco

bom dia, minha pagina esta apresentando esse problema: https://imgur.com/a/8wvO20T coloquei na tag html o overflow-x: hidden, o que tirou o scroll mas o width da pagina ficou alterado aparecendo o pedaco inferior do banner(que deveria ficar escondido) Como posso resolver isso? seque o css do banner

html{
    font-size: 1.2rem;
    overflow-x: hidden;
}
.banner-twitter{
    width: 14em;
    line-height: 1;
    padding: 1em 0;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;

    font-size: .4em;
    font-family: "Open Sans Condensed", sans-serif;

    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translate(6.5754em, -2.4749em) rotate(45deg);
    transform: translate(6.5754em, -2.4749) rotate(45deg);

}