Hi. Perhaps I can be of some help here. 

I agree with others that we don't want to use !important in our CSS rules if at all possible (it creates a styling shouting match that is near impossible to maintain over time). @polesye's link to CSS specificity is right on. Though courses.css is loaded/parsed after your CSS file, there are ways to have your rule be more specific and thus respected when there are two conflicted values for the same property of the same element. 

The rules in the line we've commented on are different than the ones noted in your comment above (```.annotatable-wrapper .annotatable-header .annotatable-title``` vs. ```.annotator-editor a, .annotator-filter .annotator-filter-property label```). Assuming we're dealing with the selectors from your actual code, without knowing exactly what is overriding your padding on ```.annotatable-wrapper```, ```.annotatable-header```, and ```.annotatable-title```, my steps to resolve this would be:

1. **Find out what base LMS style rule (from courses.css)** is trumping yours. This involves peeking at the web inspector and finding the exact selector rule and the property involved.
2. **Re-craft your CSS selector to be more specific than the rule you found in step 1**. This could involve adding additional pseudo states such as ```:visisited, :link, :active``` if you're working with links or could be as easy as referring to the parent element's class attribute or a specific HTML element.
3. **Remove the !important and comment in detail on why the style rule is needed**. These will help with maintenance and others who want to build on what you have or pay down some CSS debt and remove the hurdle you jumped over.

if you still need help, find the specific style rule that's overriding yours and share it here. We can craft a selector that can get the job done from there.