largura da página

Oi Eduardo, tudo bem?

Você consegue atualizar esse Jsbin colocando o HTML também, por favor?

Abcs!

Olá, estou com um problema parecido... Consegui deixar a caixa deitada e cruzar, mas ou ela fica escondida demais e aparece a barra de rolagem horizontal ou ela não preenche o espaço todo, fica como um quadrado mesmo... Alguma ideia? https://imgur.com/a/n1YEj (imagem de como está o layout)

<header class="titulo-principal">
        <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <ul>
        <li class="palavra-home eficiencia">Eficiência</li>
        <li class="palavra-home boas-praticas">Boas práticas</li>
        <li class="palavra-home codigo-limpo">Código limpo</li>
        <li class="palavra-home css3">CSS3</li>
        <li class="palavra-home html5">HTML5</li>
        <li class="palavra-home javascript">JavaScript</li>
        <li class="palavra-home acessibilidade">Acessibilidade</li>
        <li class="palavra-home responsivo">Responsivo</li>
        <li class="palavra-home otimizacoes">Otimizações</li>
        <li class="palavra-home agilidade">Agilidade</li>
        <li class="palavra-home design">Design</li>
    </ul>
    <a class="banner-twitter" href="twitter.com">Siga-me no Twitter</a>
    </header>

.inicio-post{
    background-color:#F2FFFC;
    position:absolute;
    top:4em;
    right:4em;
    left:30%;
    height:8em;
    padding:1.5em;
    color: #000;
}
.banner-twitter{
    background-color:#3C1D3D;
    color:white;
    padding:0.5em 0;
    box-sizing:border-box;
    text-align:center;
    text-decoration:none;
    border:0.2em solid black;
    font-size:1.2em;
    font-family:"Open Sans Condensed", sans-serif;
    position: absolute;
    top: 0;
    right: -3em;
    transform-origin: 0 0;
    transform:rotate(45deg);
    width:10em;
}
.caminho-post{
    background-color:#FFF;
    padding:0.2em;
}

.palavra-home{
    position:relative;
    color:#D5447E;
    font-family:"Shadows Into Light", cursive;
    font-weight:bold;
}

Desde já agradecido.

Boa noite Natan,

Adicionei o HTML.

https://jsbin.com/xateden/edit?html,css,output

Oi Eduardo,

Olhei seu código e não encontrei o problema, mas tem uma solução rápida; overflow-x: hidden; lá na regra HTML.

Abcs!

Muito obrigado Natan.

Resolveu. =)