レスポンシブサイトでスマホ用cssが反映されない。

現在レスポンシブサイトを作成しています。

スマホでチェックした際
スマホ用cssが反映されず、PC用cssが反映され、スマホ表示が崩れてしまいました。

応急処置としてPC用cssが反映されてしまう箇所については、
スマホ用CSSでその箇所に　「!important」を記載したので、今は表示は崩れていません。

このようにレスポンシブサイトでスマホ用cssが反映されず、PC用cssが反映されるとき皆様はどういった対応されていますか。

個人的に「!important」以外の解決策があれば知りたいと思い質問投稿させて頂きました。

設定は下記です。

■ビューポート設定■
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">

■cssの書き方■

PC用css

@media screen and (max-width: 500px) {
スマホ用CSS

｝

宜しくお願い致します。