レスポンシブ対応について

前提

ここに質問の内容を詳しく書いてください。
メディアクエリーを適用して、レスポンシブデザイン対応に挑戦しているのですが、
上手く反映されず、原因が分からない状況です。

実現したいこと

メディアクエリーを適用して、レスポンシブデザイン対応する

該当のソースコード

/*モバイル版
------------------------------------ */
@media (max-width: 600px) {
.page-title {
font-size: 2.5rem;
}

/* HEADER */
.main-nav {
font-size: 1rem;
margin-top: 10px;
}
.main-nav li {
margin: 0 20px;
}

/*HOME */
.home-content {
margin-top: 20%;
}
.page-header {
flex-direction: column;
align-items: center;
}

}

試したこと

・誤字脱字がないかの確認
・キャッシュの確認
・サイトを更新
・chrome、microedgeの両方のブラウザで確認

リンク内容
 リンク内容

m.ts10806

2022/08/31 20:53

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 「うまくいかない」などで他者に伝わる情報量はゼロなので具体的に起きている現象を記載してください。 https://teratail.com/help/question-tips#questionTips34 あと、画像ですかね。「リンク内容」のリンク先。原則teratailの投稿機能で添付してください。