レスポンシブデザインにする際にCSSが反映されない

Question

前提・実現したいこと

現在、html.cssを勉強していて、模写コーディングでレスポンシブ対応させる際に
レスポンシブデザインが反映されない件について質問させていただきます。
とても初歩的なことだとは思いますがご教授お願い致します。

chromeの検証ツールで確認したところ、ブレークポイントが670px以下になっても670px以上のcssが適用されてしまっています。

ブレークポイント670px以上のcss

.lesson {
    float: left;
    width: 25%;
    padding: 0 5px;
}

ブレークポイント670px以下の適用されるはずのcss

@media (max-width: 670px){
  .lesson {
      width: 100%;
  }
}

画面を670px以下にしてデベロッパーツールで確認すると、
.lesson-wrapper .lessons .lesson {
float: left;
width: 25%;
padding: 0 5px;
}

@media (max-width: 670px)
.lesson {
width: 100%;
}

となり、実際には@media (max-width: 670px)のほうのwidthは横線で消されています。
メディアクエリは、直接ではなくresponsive.cssとして読み込んでいます。
読み込んでいる順番は、

<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="responsive.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> の順で読み込んでいます。 もう3時間くらい悩んでおり、挫折しそうだったので質問をさせていただきました。 解決方法をご教示いただけますと幸いです。 読みにくい質問ですが、何卒よろしくお願いします。

Answer 1

単純なミスです。

@media (max-width: 670px) { /* ←これと */
  .lesson {
    width: 100%;
  }
} /* ←これが必要 */

Comments

[yukke-momosuke]

打ち間違えていました。申し訳ありません。{}は書いてありました。
ただ、デベロッパーツールで確認すると、{}は表示されないようです。

[itagagaki]

デベロッパーツールで表示されていないのなら書かれていないのでは。
ページをサーバー経由で開いたのかfile://で開いたのかわかりませんが、
書いたファイルが反映されているか確認してみてください。
キャッシュのクリアやリロードが必要なのかもしれません。