Background do a ao fazer hover ou focus

O background do "a" ao fazer hover ou focus fica do tamanho do conteúdo e não se liga ao parágrafo como deveria.

/*INICIO SEÇÃO BLOG*/
.blog{
    background-color: #999;
    color: #FFF;
    border-bottom: 10px solid #851944;
    height: 33rem;
    position: relative;
    background-image: linear-gradient(45deg,
                        transparent,
                        transparent 14px,
                        rgba(200, 200, 200, 0.1) 14px,
                        rgba(200, 200, 200, 0.1) 15px,
                        transparent 15px,
                        transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}
.blog h2{
    color: #fff;
    font-size: 2.75rem;
    margin-left: .75em;
    padding: .75em 0 .05em 0;
}
.sub-titulo-blog{
    margin-left: 1.8rem;
}
.blog ol{
    margin: 1em 0;
}
.blog li{
    margin-left: 2rem;
    padding: .75em;
    width: 30%;
}
.blog li a{
    color: #FCF;
    padding: .75em;
}

.blog .inicio-post{
    background-color: #f2fffc;
    position: absolute;
    top: 4em;
    right: 4em;
    left: 30%;
    height: 8em;
    padding: 1.5em;
    color: #000;
    display: none;
}


.blog a:hover + .inicio-post,
.blog a:focus + .inicio-post {
    display: block;
}

.blog li:hover,
.blog li:focus,
.blog a:hover,
.blog a:focus{
    background-color: #f2fffc;
    color: #f26;
}
/*FIM SEÇÃO BLOG*/

<section class="secao-inicio blog">
            <h2 class="subtitulo-index">Blog</h2>
            <small class="sub-titulo-blog">Ú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>
                    <a href="blog.html">Por que fazer páginas acessíveis?</a>
                    <p class="inicio-post">Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>
                </li>
                <li>
                    <a href="blog.html">JavaScript não obstrusivo</a>
                    <p class="inicio-post">JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>