Reduce padding between Navigation and Logo

Hey there,

In full screen, my nav links and logo are on the same line, as the window shrinks in size, or on a large ipad, the nav links pop to a line underneath the logo.  What CSS can I use to reduce the space between those two things when that happens?  I'm using the Charlotte Template. (the area in the red box on the image)

Can you share link to your site? 

http://crownhillfarm.com

I would actually MOST prefer that as the window sizes down, the nav links stay across the top and don't flip to underneath, but if I have to deal with it underneath on smaller screens, I'd like less padding.

Try adding to Home > Design > Custom CSS

@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
div#headerNav {
    margin-top: 0 !important;
}
}

That dropped the nav links to always be under the logo, which I definitely don't want.  See screenshot

~Delion