まずは、class（またはid）が有効になっているのかを検証する必要があります。効いている場合と、そうでない場合で確認することが変わってきます。

ブラウザの「ディベロッパーツール」を活用する

基本的な検証は、ブラウザの「ディベロッパーツール」を使うことをおすすめします。ディベロッパーツールで確認すればほぼ間違いなく、現在の状態がわかるからです。

ただ、それでもヘルプを出されることがあるので、かなり原始的なものとなりますが、ディベロッパーツールを使用しない方法を下記にまとめてみようと思います。

ちなみに、今回ディベロッパーツールの使い方については特に掘り下げません。
下記のサイトさまにて詳しく説明されているので、ご参考までに。

要素に「背景色（またはフォントに色）」をつけてみる

ディベロッパーツールに頼らない場合、効いているのかどうかは「見た目で判断」するのが一番わかりやすいです。よって、まずは該当する要素に「背景色（またはフォントに色）」を指定してみます。

.該当クラス {
  background: 色指定;
}

色が変わったらclass（またはid）は効いているし、変わらなかった場合は効いていないということになります。

効いていたということは、class（またはid）自体は「生きている」ということになります。このことからわかるのは、class（またはid）自体に問題があるわけではなく、前後の要素に問題がある可能性があるということです。

例えば、

指定したstyle（background、border、height…など）に問題がある

• つづりが合っていない。
• タグが閉じられていない（「;」のつけ忘れ）。

.該当クラス { /* 'background' のつづりが合っていない */
  backgroundd: red;
}

.該当クラス { /* ';' 閉じタグがないため、次に続く color が反映されない */
  background: red
  color: white;
}

指定した「style」に誤りがある可能性があります。つづりを確認したり、指定したプロパティが正しいか確認した方が良さそうです。また、styleの閉じタグ（「;」）が無い可能性もあります。

変更をしたいコンテンツに付随する何かが妨げになっている

• タグが閉じられていない（「}」のつけ忘れ）。

.sample { /* '}' 閉じタグがないため、次に来るクラスが反映されない */
  background: red;

.該当クラス {
  color: blue;
}

前後のコンテンツやコンテンツにかかるstyleが影響している可能性があります。例えば、直前に書いてあるclass（またはid）のstyleの閉じタグやメディアクエリの閉じタグ（「 } 」）が無いこともよくあります。

優先度が低い

• classとidであれば、idが優先されます。
• 同じclass（またはid）名であっても「.btn」と「.wrap .btn」であれば親要素を継承している「.wrap .btn」が優先されます。
• 同じclass（またはid）名が重複している場合、「下に追加された」class（またはid）の方が優先されます。
• 最優先となる「!important」が効いてしまっていることも。

/* id の方が優先される -> red */
#name { /* Win */
  background: red;
}
.name { /* Lose */
  background: white;
}

/* 親から指定している方が優先される -> red */
.wrap .btn { /* Lose */
  background: red;
}
.btn { /* Win */
  background: white;
}

/* 重複時は下に記載している方が優先される -> white */
.sample { /* Lose */
  background: red;
}
.sample { /* Win */
  background: white;
}

/* !importantで指定すれば、どんな条件においても一番優先される -> white */
.wrap .title { /* Lose */
  background: red;
}
.title { /* Win */
  background: white !important;
}

など、class（またはid）の優先度が低い、またはclass（またはid）が重複しており、打ち消しが発生している可能性もあります。

class（またはid）が効かなかった場合、class（またはid）自体が「死んでいる」状態となります。この場合は、class（またはid）とその前後に問題がありそうです。

class（またはid）名に問題がある

• 文頭の「.」が抜けている、または「..」など重複している。
• class（またはid）名が合っていない、class（またはid）名が数字から始まっている。
• 「入れ子の関係性」が違う。
• 不要な半角アキなどが存在している、または半角アキが無い。

<div class="wrap"><div class="sample btn"></div></div>

sample { /* クラス名に '.' がついていない */
  backgroundd: red;
}

..sample { /* クラス名の '.' が重複している */
  backgroundd: red;
}

.sammple { /* クラス名（ sample ）が間違っている */
  backgroundd: red;
}

.01sample { /* クラス名が 数字 から始まっている */
  backgroundd: red;
}

.sample .btn { /* 入れ子の関係性が違う（.sample.btn が正しい） and 不要なアキが入っている */
  background: red;
}

コピペのミスなどでclass（またはid）名に付ける文頭の「.」が無かったり、「.」が重複している場合があります。

また、class（またはid）名のスペルがhtmlとCSSで違っていたり、関係の無い要素を親にしていたために「入れ子の関係性」が違ってしまったりする場合も。さらにhtmlでclass（またはid）を複数指定する際に、半角アキを忘れてしまって、前後のクラス名とひと続きになってしまっていたケースもありました。

どこまでstyleが効いているのかを検証する

上記の内容を確認はしてみたけれど、原因がどうしてもわからない場合は、とにかくさまざまなパターンを検証。トライアンドエラーを行ってみます。

• styleを全部消してみる（そもそもstyleに問題があるのかを調べる）。
• styleを部分的に消してみる（styleのどこが影響しているのか、どこからstyleが効いているか、また効いていないかを調べる）。
• 該当のコンテンツを部分的に消してみる（コンテンツ自体に問題がないかを調べる）。
• 該当のコンテンツの前後の要素を消してみる（他のコンテンツに問題がないかを調べる）。
• ディベロッパーツールで直接コンテンツにstyleをつけてみる（そもそもそのstyleがそのコンテンツで使えるのかを調べる）。

部分的に消して見ることによって、ある場所を消したときに反映される。または追加した際に反映されないということがわかり、解決の糸口となることもあると思います。

floatの解除ミス

表示がおかしいと言われて確認すると、解除を忘れている場合が多いような気がします。

float設定しているコンテンツの次の要素にclearを追加するか、親要素にoverflowを付けるかfloat以外の方法に変更するなど、いろいろと試してみるのも良いかもしれません。とりあえず、floatを使ったら解除をしましょう。

高さが無くなっている

styleによってはコンテンツの高さが無くなるものがあります。前述したfloatもそうですね。高さが無くて潰れて見えなくなっている場合もあるので、注意した方が良さそうです。

最終手段は寝かせてみるのもひとつの手

案外、時間を置いて考えてみるとひらめきが生まれることも。丸一日悩んでいた部分が、ものの数分で解決することもあります。…客観的な目線って大事です。