There are 2 ways to solve this problem.

1. You could make the Form Wizard inputs smaller. You can go into the settings for the Form Wizard and specify a custom CS Class for the outer container, for example you enter "customclass", then in CSS you can control text box width like this:

.customclass .qtext input { width:100px; }

2. You could make the side column wider on that page.

In the next release of Form Wizard Pro we will also have the ability to use custom CSS classes per question so that you can make the inputs have different widths or styles per question.

See also

CSS Its All About Understanding Selectors

Hope that helps,

Joe

if you want to control the width of the container then just do this:

.mycustomclass { width: 200px; }

Again, if you master CSS selectors you will be able to figure this stuff out for yourself. 

You can organize the CSS however you like in terms of which files you put things in, the only thing you have to keep in mind is that when they are combined they are combined in the sequence that the files are listed in style.config and this affects the specificity of a style rule. A style rule lower in the CSS will override a rule higher in the CSS.

You could create a new file mycustom.css and include it in the bottom of style.config if you want to.

Hope that helps,

Joe

Actually the paragraph is contained in a div with the class settingrow and this may be what makes it too wide so you may need to do something like this:

.mycustomclass .settingrow { width: 200px; }

style can be inherited from mutliple CSS selectors so one needs to learn to use the Firebug plugin or IE developer tools or Chrome element inspector or things like that as they can show which style rules are coming from which selectors and this gives you the idea of what you need to override on more specific selectors.

Hope it helps,

Joe