styling side-by-side input fields

I've checked other posts but can't seem to find this. You've likely covered this already. I'm adding a custom class name to make it easier to style the smaller input fields side by side, but when designate a width it's giving me lots of extra space in between the fields. I've separated out the styling with the class name by itself and with "input" added but still it's not behaving as expected.

I'm trying to get "phone" and "alternate phone" closer together but can't seem to.

http://www.coachstrobl.com/scoringfactory/clinics/clinic-sign-up

Thanks for any help.

Thanks Kevin. Just curious, though, why bother naming a class on the input?

If I'm understanding correctly, from your example above I would need to target each phone field separately. Originally I gave all my phone fields a class of "phone" and would like them all to behave the same way.

When you include field numbers doesn't that limit your styling to just that field?

Sorry to be a bother...

Basically it's taking an object oriented approach.

GF has default 'parents' and allows easy modifications through it's children.

You can redefine a parent class to style your phone field, or write your own rules...it's up to you and your comfort with CSS. One thing does stay the same, however, is the nesting. To access any form field you do need to define the nesting path:

.gform_wrapper => .gform_body => .gform_fields => .gfield => New_Input_Class