Aula Inline e Block

Olá pessoal, quero entender porque no meu código tive que inverter a ordem do comando para bloco Principal ficar cinza igual ao do professor?

CSS

body{

}

#banner {
    width: 100%;
}

.principal{
        padding: 30px;  
        background: #CCCCCC  / / << tive que inverter essa colocando abaixo.

}

        h1{
         text-align: center
        } 

        p   {
            text-align: center;

        }


         #missao{
             font-size: 20px
         }    

        em strong{
             color: red; 

        }

.itens{
    font-style: italic
}    

.beneficios{
    background: #FFFFFF
    padding: 20px; // espaçamento interno
}

    h2{
        text-align: center;
    }

    ul{
        display: inline-block;
        vertical-align: top;
        width: 20%;
        margin-right: 15%; //margem a direita 
    }

.imagembeneficios{
    width: 50%;
}