O "@media only screen and (max-width: Xpx)" não está funcionando

A situação

Para quem está começando aprender como desenvolver websites, com certeza já passou ou poderá passar por esse problema, que é quando o "@media" não funciona, mas antes, só pra explicar pra quem tá confuso, o "@media" é uma regra que vai ao CSS que permite criar padrões pra cada tipo de tamanho, ou seja se o site for visto num aparelho celular que tem a tela 640 por 480, ele vai seguir tais regras, agora se eu entro num aparelho maior, digamos num computador que a tela é de 1366 por 768, ele vai seguir outra regra, pois bem, assim como eu, tenho certeza que outras pessoas passaram pelo mesmo problema.

A solução

A solução talvez seja bem mais fácil do que você imagine, pra ser mais exato, basta apenas que você cole um código lá no header do seu site, e o código é:

Fiz isso mas não resolveu

Caso não tenha dado certo, tente revisar o código, veja se está tudo certo, veja também se não está faltando "{" ou "}" no código, tente testar em outro navegador, etc...