First some general advice. The name of the CSS class is apparently qa-nav-main-link, not header-nav-main-link. Please get these things right in your questions, otherwise people won't know what you're talking about and you may get incorrect advice. Also, you should make sure all of your style definitions are terminated with a semicolon (I see several that aren't in your screenshots).
Now, if you just want to set a background color I'd recommend using the specific attribute background-color instead of the shortcut background. You should also remove all background attribute values that you aren't using anyway (none repeat scroll 0 0).
If you want an element to have the same color as its containing element, you could use one of the values inherit (to make it inherit the color of the parent element) or transparent (to make the color of the element behind it shine through) instead of explicitly setting a color.
Did you verify that the CSS files on your web-server have been updated with the changes you made? Is there some caching infrastructure between web-server and browser that may retain an old version of the website for some time? Try connecting to the web-server directly to check if the web-server itself shows the correct page.
Also, as mentioned in my comment, use your browser's developer tools to inspect the website (in Firefox you display them by pressing Ctrl+Alt+i, or simply by right-clicking on an element of the webpage and then selecting "Inspect Element" from the context menu). Those tools should also allow you to temporarily override styles until the page is reloaded, so you can check if an attribute change has the desired effect. They should also allow you to check if the style you want to apply is being overridden by some other style.
As a side-note: please disregard the two answers you've gotten before, as they are flat-out incorrect. Not only do they have the CSS class name wrong, but their suggestion would apply only to <a> elements that have an ancestor with the given CSS class.
