When you move fields side by side, you also need to consider the overall width of the field container ('e.g., #q1') and not just its contents (the label, input box container, and input box).

For each of your CSS rules where you're putting fields side by side, try specifying a width, too.

So, instead of:

#q12, #q13 {display: inline-block;}

Try:

#q12, #q13 {display: inline-block; width: 300px;}

Note that you can also specify a percentage width. You'll also want to ensure that the label width and input box container width do not combine to be wider than the field width. If they do, the input box will end up below the label.