Dúvida Caixinha texto design responsivo errado

Olá, Marcos! Tudo bem? =)

Eu dei uma olhada aqui no seu código e rodei... Aqui apareceu normalmente, conforme a primeira figura, mas acho que sei o que está acontecendo.

Repara que no seu código, o HTML responsável por aquela caixinha é o seguinte:

<p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>

Esse elemento possui a classe inicio-post:

.inicio-post {
    background-color: #FFF;
    position: absolute;
    top: 3em;
    right: 3em;
    height: 6em;
    padding: 1em;
}

Agora vamos ao que interessa... Esse parágrafo está com posicionamento absoluto e a posição dele é top: 3em e right: 3em, ou seja, ele deve estar distante 3em do topo e da direita da página. O que é verdade em ambos os casos!

O problema é o tamanho desse parágrafo, ou seja, o quanto ele irá ocupar na página. No meu caso, estou usando um monitor com 1920 x 1080px. Dá uma olhadinha na resolução do seu monitor, pois acredito que o problema seja isso...

Depois teste se o problema realmente é esse colocando alguns valores de width para essa classe! Chutando bem feio, coloque assim:

.inicio-post {
    // Aqui estão TODAS as propriedades anteriores.
    width: 50%;
}

Espero ter ajudado, mas se ainda estiver com dúvida, posta aqui para podermos ajudar!

Abraço e bons estudos,

Fábio

Olá Fábio tudo bem?

Muito obrigado pela ajuda, o problema realmente era a resolução do monitor do meu Notebook que é 1366x768.

Colocando o a propriedade width: 50%; resolveu meu problema, apesar de quebrar o texto dentro da caixinha (não tem jeito por conta da frase ser longa.

Mas uma vez obrigado pela ajuda e um abraço!