dropdown showing 2 options in a row

Hello,

Not sure why dropdown is showing 2 options in a row instead of showing each option in a new row.
Screenshot attached.

Here is both php and html code.

<div class="row">
<div class="col-md-6">
<div class="form-group"> <label>Subject</label>
<select name="subject" id="subject" align="left" onChange="framework_load_plugin_url('plugins/childworksheet.php',document.forms[0],'childSelect','../','');return document.MM_returnValue">
<option value="None">First choose a Subject</option>
<?php
while(!$getsubject->atEnd()) { //dyn select
?>
<option value="<?php echo($getsubject->getColumnVal("subject_id")); ?>"><?php echo($getsubject->getColumnVal("subject_subject")); ?></option>
<?php
$getsubject->moveNext();
} //dyn select
$getsubject->moveFirst();
?>
</select>
</div>
</div>

<!-- HTML BELOW -->
<div class="row">
<div class="col-md-6">
<div class="form-group"> <label>Subject</label>
<select name="subject" id="subject" align="left" onChange="framework_load_plugin_url('plugins/childworksheet.php',document.forms[0],'childSelect','../','');return document.MM_returnValue">
<option value="None">First choose a Subject</option>
<option value="1">English</option>
<option value="2">Mathematics</option>
</select>
</div>
</div>

It is probably the CSS on the page changing how options display. I'd need to see it on the page to debug it.

URL sent in private message.

You are using some javascript to make your select list look different. It is using a <ul> and <li> tags to do that behind the scenes, so your list is picking up those classes from your CSS making it display that way. You can overwrite it with css like:

.chose-us-area .info .nice-select ul {
margin-top: 0;
}

.chose-us-area.item-half .info .nice-select li {
float: none;
width: 100%;
margin-top:0;
}