Specific positioning doubt in CSS

Question

My João da Silva page, in the Section "Blog" has a white band at the bottom that I can not take out at all. They follow the relevant parts of the script and a print:

Print:

html:

<section class="secao-inicio blog">
            <h1>Blog</h1>
            <p class="links">Últimos posts</p>
            <ol>
                <li class="link-blog">
                    <a class="post-destaque" 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="link-blog">
                    <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
                     <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
                </li>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
                    <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>

css:

.blog {
    background-color: #999;
    color: #FFF;
    position: relative;
}

.blog li a {
    color: #FCF;
    margin-left: 2rem;
}

.blog li {
    width: 30%;
    margin-bottom: 1rem;
}

.blog .link-blog a:hover {
    padding: .5rem .5rem .5rem;
    color: black;
}




.secao-inicio h1 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    margin: 0rem 0rem 0rem 2rem;
}

.secao-inicio ul {
    margin: 0 2rem;
}
.secao-inicio h2 {
    text-shadow: 3px 3px #000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

I believe the problem is in the class . blog, because in a previous Section that uses the class . secao-start is all ok, but I left it there because of my very low experience. I hope I have been able to explain the problem.

Answer 1

As commented, the problem is in the margins of the button .botao-index that is applying a lower margin, creating a space below the sections.

To solve just put 0 in the lower margin:

         1   2   3  4      1: top     3: bottom
         ↓   ↓   ↓  ↓      2: right   4: left
margin: 2em auto 0 auto;

Code:

body{
   margin: 0;
}

.blog {
    background-color: #999;
    color: #FFF;
    position: relative;
}

.blog li a {
    color: #FCF;
    margin-left: 2rem;
}

.blog li {
    width: 30%;
    margin-bottom: 1rem;
}

.blog .link-blog a:hover {
    padding: .5rem .5rem .5rem;
    color: black;
}




.secao-inicio h1 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    margin: 0rem 0rem 0rem 2rem;
}

.secao-inicio ul {
    margin: 0 2rem;
}
.secao-inicio h2 {
    text-shadow: 3px 3px #000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.botao-index {
   font-size: 1.25em;
   background-color: rgb(133, 25, 68);
   color: rgb(255, 255, 255);
   padding: .5em;
   border: .2em solid rgb(0, 0, 0);
   width: 40ch;
   margin: 2em auto 0 auto;
   display: block;
   text-align: center;
}

<section class="secao-inicio blog">
   <h1>Blog</h1>
   <p class="links">Últimos posts</p>
   <ol>
       <li class="link-blog">
           <a class="post-destaque" 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="link-blog">
           <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
            <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
       </li>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
           <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
       </li>
   </ol>
   <a class="botao-index" href="blog.html">Veja mais</a>
</section>
<section class="secao-inicio blog">
   <h1>Blog</h1>
   <p class="links">Últimos posts</p>
   <ol>
       <li class="link-blog">
           <a class="post-destaque" 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="link-blog">
           <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
            <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
       </li>
       <li class="link-blog">
           <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
           <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
       </li>
   </ol>
   <a class="botao-index" href="blog.html">Veja mais</a>
</section>