Contact Form 7 Wordpress Plugin not rendering correctly

Question

I'm creating a custom form using Contact Form 7 plugin for a wordpress page: http://dentclaims.com/contact , and the radio buttons and checkboxes are appearing on separate lines. I am using the following:

Tesseract Wordpress theme v2.1 - Wordpress v4.3.1 - Chrome for Mac Version 46.0.2490.80 (64-bit)

Here is the code in the CF7 form:

<p>This appointment is for*:  [text* patient-name] </p><br />
<p>Requested by: [text your-name] </p>

Your email*:  [email* your-email]

<p>Your telephone number*:  [tel* your-tel] </p>

<p>Preferred date (select up to three)
First choice: [date date-first]  Second choice choice:  [date date-second] Third choice:  [date date-third] </p>

Preferred time:[radio radio-time "Any time" "10:00am-Noon" "Noon-2:00pm" "2:00pm-5:00pm"]

<p>Reason for your visit:  [checkbox checkbox-reason "Exam and cleaning" "Consultation" "Previously discussed treatment" "Other"]</p>

<p>Notes for the doctor:<br />
[textarea textarea-notes]</p>

<p>[submit "Request Appointment"]</p>

There are 2 references to the .wpcf7 class in the theme's CSS:

here:

.wpcf7-submit{
    float: left;
    clear: both;
    margin-bottom: 20px;

and here:

/* CONTACT FORM 7 */
.wpcf7-form-control-wrap { width: 50%; }

No matter how I arrange the form elements, they still render improperly. Can anyone suggest a solution? Another CSS file to check? N00b here, so struggling where else to look for solutions.

Answer 1

There is a line of code in your CSS that is causing all span elements to have a width of 100%:

#content form span {
    width: 100%;
}

Make that less ambiguous so as to not affect the radio option labels.