Narrow

I have an omega sub-theme that I have three side by side regions in the 24 column branding-zone as follows: header-first 5 columns, branding 14 columns, header-second 5 columns. The two header regions contain responsive images that re-size at the default omega media query breakpoints.
What I want to do is have the "h1 .sitename" text to re-size at the breakpoints to maintain the spacing. The default behavior as the grid narrows is to wrap the text. This creates extra space under the two header regions on each side.

My CSS:
Global:
h1.site-name a,
h2.site-name a{