First, inline CSS is evil. Don't use it without good reason. Good reason is very, very rare - and this isn't one of them. In your code here the 'padding-bottom' call in your css gets pre-empted by the inline style. If you hadn't had the inline style there you would have noticed the padding changing on the div as you adjusted it and that in turn would have made the lack of change on the input elements that much less mysterious.
Second, class element names have a lot of landmine potential for the reasons you saw when you got your answer. It's just too easy to miss that period when reading the css sheet. That said, if you are writing your sheet to work without an html5shiv then using html5 semantic tags as class names is acceptable, even desirable. For example <div class="header"> instead of <header> Just don't mix and match these approaches - either used classes for the html semantic elements, or directly use the html5 semantics.
Third, use the label tag. <label for="fname">First Name:</label> The for attribute of label ties the label to the input it labels - the benefit of this is clicking on the label places focus on the input element. While this isn't especially useful for text inputs, it makes radio and checkbox input much more user friendly, ESPECIALLY on mobile devices.