CSS Debugging

/* Add this temporarily to debug layout issues */

/* See all elements */
* {
  border: 1px solid red !important;
}

/* Or target specific elements */
.container {
  border: 2px solid blue !important;
}

.item {
  border: 2px solid green !important;
}

/* Debug specific element */
.problematic-div {
  border: 3px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

/* ❌ PROBLEM: Your style doesn't apply */
.button {
  background: blue;  /* This won't work! */
}

/* ✓ Reason: More specific selector wins */
#header .nav .button {
  background: red;  /* This wins (1 ID + 2 classes) */
}

/* ❌ BAD FIX: Using !important */
.button {
  background: blue !important;  /* Works but creates problems */
}

/* ✅ GOOD FIX: Match or exceed specificity */
#header .nav .button {
  background: blue;  /* Same specificity, later in file wins */
}

/* ✅ BETTER FIX: Reduce original specificity */
.nav-button {
  background: blue;  /* Simpler, easier to override later */
}