a caixa branca fica sobre o link e não apacere a frase

Boa noite, fiz exatamente como está no vídeo e resultado foi totalmente diferente do video. ficou um bloco gigante branco, com as letras não aparecendo e este mesmo bloco não deslocou.

HTML

<section class="secao-inicio blog">
            <h2>Blog</h2>
            <small>Últimos posts</small>
            <ol>
                <li>
                    <a href="blog.html">O essencial de design responsivo</a>

                    <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>

                </li>
                <li>

CSS

.inicio-post {

    background-color: #FFF;
    position: absolute;
    top: 3em;
    right: 3em;
    height: 6em;
    padding: 1em;

}

.foto-home {
    height: 200px;
}
.saudacao p {
    color: #99A;
    line-height: 1;
}
.saudacao-inicio {
    color: #889;
    font-size: 5rem;
    margin-left: 1em;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
    margin-right: 2em;
    padding-right: 4em;
}
.saudacao strong {
    color: #000;
    font-size: 3rem;
}
.saudacao em {
    color: #851944;
}

.saudacao {

        padding: 2em;
}

.saudacao-ultima-linha em {

    font-size:4.5em;
}

.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 40ch;
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-size: 1.25em;
    padding: .5em;
}
.secao-inicio h2 {
    text-transform: uppercase;
    padding: 1rem;
    padding-bottom: 0;
    font-size: 2em;
}

.secao-inicio small {

    padding-left: 1rem;
    font-size: 1rem;
}

.secao-inicio ol {

    padding-left: 1.5rem;
}

.secao-inicio ol li {

    padding-top: 1rem;
}



.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
}
.trabalhos h2 {
    color: #FFF;
    margin-top: 1em;
    font-size: 2em;

}
.trabalhos ul {
    overflow: hidden;
    border: .5em solid black;
    margin: 1em;
}

.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    color: #FFF;
    border-bottom: .5em solid #851944;
    position: relative;
}
.blog li a {
    color: #FCF;
}
footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
}
footer a {
    color: #F99;

}

footer h2 {

    font-size: 2.5rem;

}

footer p {

    font-size: 1rem;
    padding-left: 1rem;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}