CSS が効かない、は原因が広すぎる症状です。devtools の Elements パネルを開いて、上から順に確認していきましょう。

1. そもそも要素に当たっているか

対象の要素を選択し、Styles パネルに自分のルールが出てくるかを見ます。出てこないならセレクタが間違っています。

2. 打ち消されていないか

取り消し線が引かれているプロパティは、より詳細度の高いルールに負けています。id と class の詳細度差、後から読み込まれるスタイルシートの順序を疑ってください。

3. 継承するプロパティかどうか

color や font-family は子に継承されますが、border や padding は継承されません。親に書いたのに効かない、の典型です。

4. レイアウトの文脈が合っているか

  • width はインライン要素には効かない — display: block か inline-block へ
  • align-items は親が flex / grid でなければ無意味
  • position: absolute の基準は、直近の position 指定済み祖先

5. 単位と値の書き間違い

css
/* 効かない */
.card { width: 300; }        /* 単位がない */
.card { colour: #9a90f5; }   /* 綴り違い */

/* 効く */
.card { width: 300px; }
.card { color: #9a90f5; }

ブラウザは不正なプロパティを黙って無視します。devtools では警告アイコンが出るので、見逃さないようにしてください。

6. キャッシュ

ここまで確認して原因が見つからないときは、スーパーリロード（Shift + 再読み込み）を試します。最初にやると他の原因を見落とすので、最後に回すのがコツです。