Have you check if your custom CSS is not overwritten by the Apex CSS?
Ideally your custom CSS needs to be loaded after the Apex CSS to be sure your rules are applied.
If you can't do that, you can try to add !important to your CSS file, for example
font-size: font-size:100% !important;
This is not the best but it is a solution; See Assigning property values, Cascading, and Inheritance for more details
Did you use the file before with less rules, meaning: have you updated the file and uploaded it again?
If yes - did you try deleting the cache in your browser - there is a problem with the timestamp in CSS-Files showing wether is was updated (once it was cached it will deliver the cached version until cache is cleared) - so Ctrl + F5 or delete the cache in your browser (13 Ways to Clear Your Browser's Cache - wikiHow)
Maybe this helps.