Site Responsivo

Fala Galera, estou desenvolvendo um site responsivo e no meio do desenvolvimento reparei que quando vou fazer uma referência para outro tamanho de tela, tenho sempre que usar !important nos elementos por Exemplo:

@media screen and (max-width:776px) {

.caixa-news {width: 40%!important; }

.caixa-news h1 {font-size: 21px!important;}

}

Queria saber se existe outra maneira de fazer essa referencia, sem usar !important.