This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template e.g. rt_fracture). GANTRY4 will automatically load this CSS file. you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
Thanks for the tip! I was going crazy trying to figure out how to make a logo responsive.
I also did away with some of the spacing issues by changing the padding around the rt-block for the custom html logo module in my custom css file - which allowed the logo to be larger. However, because the site I am doing has a very "horizontal" logo, it still wasn't enough. So I changed the header layout from 3-7-2, to 4-6-2 so my logo would show up wider, and thus, larger.
Then i realized that messed up the layouts for the tablets and phones. Oh well.