Media Query Not Applying

A responsive override fails because media queries don't add specificity — the earlier, more specific selector wins.

.btn {
  padding: 10px 20px;
  background: blue;
}

nav ul li .btn {
  background: green;
}

@media (max-width: 500px) {
  .btn {
    background: red;
  }
}

On a 400px-wide screen the button is still green instead of red. What is the bug and how do you fix it?