Não entendi

No HTML

 <ol>
                <li class="mais-recente">
                    <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 class="mais-recente">
                    <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 class="mais-recente">
                    <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>

No CSS

.blog .inicio-post {
    position: absolute;
    top: 4em;
    height: 8em;
    left: 30%;
    right: 4em;
    background-color: #F2FFFC;
    color: #000;
    padding: 1.5em;
}
.blog .mais-recente {
    background-color: #F2FFFC;
}
.blog .mais-recente a {
    color: #F26;
}

Não sei o motivo de não estar dando certo peço ajuda para entender Obrigado