O meu ".inicio-post" não esta responsivo a página

Olá, meu .inicio-postnão responde a alteração da pagina, quando aperto F12 ele aparece em cima do texto "BLOG últimos posts" e quando aperto para simular a tela de um celular ele continua em cima do texto e não ha um reajuste. como posso arrumar isso?

.foto-home {
    height: 200px;
    padding-top: .4rem
}
.titulo-principal{
    font-size: 3rem;
    line-height: 4rem;
    padding: 2rem;
    margin: 0;
    border-bottom: .5rem solid #000;
    position: relative;
}
.palavra-home{
    position: absolute;
    font-size: 1rem;
    font-family: "Shadows Into Light";
    text-decoration: bold;
    color: #D5447E;
}
    .eficiencia {
        top: 16%;
        right: 25%;
    }
    .boas-praticas{
        top: 10%;
        right: 15%;
    }
    .codigo-limpo{
        top: 4%;
        right: 20%;
    }
    .css3{
        top: 5%;
        left: 20%;
    }
    .html5{
        top: 9%;
        left: 15%;
    }
    .javascript{
        top: 14%;
        left: 25%;
    }
    .acessibilidade{
        top: 22%;
        right: 30%;
    }
    .responsivo{
        top: 22%;
        left: 30%;
    }
    .otimizacoes{
        top: 29%;
        right: 19%;
    }
    .agilidade{
        top: 26%;
        left: 19%;
    }
    .design{
        top: 29%;
        left: 29%;
    }
.subtitulo-principal{
    text-align: center;
    font-size: 1rem;
    font-family: "Open Sans Condensed";
    text-transform: none;
    line-height: 1rem;
    margin: 0;
}
.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}
.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    font-size: 2em;
    color: #000;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
}
.botao-index {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    border: .2em solid black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}
.secao-inicio {
    padding: 2em;
}
.secao-inicio h2 {
    width: 100%;
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border: .5em solid black;
}
.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 small {
    position: relative;
    top: -2em;
}
.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}
    .inicio-post{
        background-color: #FFF;
        color: black;
        margin: 0;
        width: 40rem;
        position: absolute;
        top: 7rem;
        right: 4rem;
        height: 6rem;
        padding: 1rem;
    }
    .mais-recente{
        background-color: #FFF;
        width: 18rem;
        text-align: left;
    }
footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
    box-sizing: border-box;
}
footer h2 {
    font-size: 3em;
}
footer p{
    line-height: .1rem;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
    display: block;
}

Além de que mudando do meu monitor para o meu notebook há diferença nos espaçamentos também .