Custom CSS rule overridden in theme

Based on the comment by @peter-hvd, I found the problem and a workaround.

By going to the Computed tab in the DOM and Style Inspector, I expanded the color entry and found that what was taking precedence was an the inline rule

.header-bar .menu li a{color:#000000;}

As a side-note, I don’t understand why there is an inline styling rule hard-coded into each page of the website; it seems like bad coding, and I think it’s the theme’s fault. But it is what it is, and I’m not going to fix the theme.

To make it work as expected, I changed my custom rule to

.header-bar .menu li.appt-nav a {
    color: red;
}

The addition of the appt-nav class made my rule more specific and, therefore, made it take precedence over the inline rule.