CSS Applied to Elements Not Working

I have added custom css classes to elements (don’t want to apply globally – apply only to these elements) but they are not applying.
What is the protocol for using custom css classes. Please see the private link to the page I’m working on. I’m trying to do the following:
1. Adjust the top and bottom margin of the .avia-image-container but only for this page.
2. Adjust the Special Heading Text #top #wrap_all .av-inherit-size .av-special-heading-tag to move up on top of the container above it. Trying to add a z-index and negative top margin.
3. Adjust the top margin of the contact form.

I have tried various ways of adding my custom css class to the quick css but I can’t get it to apply. My custom css classes are as follows:
1. Color Section: #contact-color-section1
2. 1/1 column: .contact-page-col1
3. Image: .contact-image
4. Special Heading: .contact-title-hello
When I test in via Inspect and go to the element and enter the css rule the results apply; but I can’t make it work through the Quick CSS.
I’m using Chrome and when I Inspect, I see the custom Css Class I created as part of the avia div class. However, if I try to filter the custom class on the styles tab on the right, the custom class does not show up.
Also, can I apply CSS per page instead of Global.

Thank you