"My CSS will not apply" is a symptom with far too many possible causes. Open the Elements panel in devtools and work down the list.

1. Is it hitting the element at all?

Select the element and see whether your rule appears in the Styles panel. If it does not, your selector is wrong.

2. Is something else overriding it?

A property with a line through it has lost to a rule with higher specificity. Suspect the difference in specificity between id and class, and the order in which stylesheets are loaded.

3. Is it a property that inherits?

color and font-family are inherited by children; border and padding are not. This is the classic "I put it on the parent and nothing happened".

4. Does the layout context match?

  • width has no effect on inline elements — switch to display: block or inline-block
  • align-items means nothing unless the parent is flex or grid
  • position: absolute is measured from the nearest ancestor that has a position set

5. A typo in a unit or a value

css
/* does not work */
.card { width: 300; }        /* no unit */
.card { colour: #9a90f5; }   /* spelt wrong */

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

Browsers silently ignore invalid properties. Devtools shows a warning icon, so make sure you do not miss it.

6. Caching

If you have checked everything above and found nothing, try a hard reload (Shift + reload). Do it first and you will miss the other causes, so keep it for last.