Cannot hide an element in css yet can hide by changing in browser inspector

Question

In my website with template Helix Ultimate, it shows 2 elements that I would like to hide - or display:none. However, when I put the same code into the custom css is does not take effect although editing them in the browser inspector it does work. Is there some other way to do this or to find out what is overriding the custom css. The website is https://womenonskis23.cloudaccess.host/index.php and the 2 elements I would like to hide are circled in the attached screenshot . The 2 elements are called.moduletable or.moduletable.menu (I've tried both) and.article-social-share which is within.article-ratings-social-share - again I have tried both and with each I have tried visibility:hidden.

Answer 1

Solved. Errors in css affected the subsequent css statements and they did not take effect properly. A good css formatter and error checker solved it. I should have done that in the beginning!