A couple things you can try/take note of:
For one, CSS doesn’t require you to do a full .span.highlighted unless you have a class of “highlighted” on multiple elements, like a div and a span together. So I would first remove the .span if highlighted always applies to span tags.
Second, I would check where you’re putting this CSS alteration. CSS is always overwritten depending on scope, meaning if another rule of this is loaded after yours, your rules are always superseded. There are two good ways to combat this. The first way is to install the Jetpack for WordPress.com plugin, which comes with a Edit CSS option. Any CSS in here has precedence most of the time, unless a theme has written above it.
In the other case, you can set a !important next to any rules to enforce that they should overwrite anything else. So in your case:
.highlighted {
border-radius:7px !important;
color:#fff !important;
margin-right:0 !important;
padding:2px 3px !important;
}
The downside to using !important everywhere is that you’ll be confused in overwriting over your !important codes. It’s not clean code. If the only other method fails, resort to this method.
Good luck!
.