Foundation Reveal Form Weird Style Issue - css

Question

This is a very strange issue. On the Reveal Form (onclick of "Price and Save My Shopping List"), I thought that for some reason the text box and dropdown were disabled. This is not the case; however, it's only allowing me to click on them on the far right of the control--I had to increase the dropdown to "medium" from "small" to be able to interact with it at all. I have no idea why this is happening and couldn't even think of what to Google. So I've looked at everything related to Foundation Reveal to no avail.
Here is the jsfiddle, but although it works on my site, it does NOT on jsfiddle. If you want to see it in action, I'll send you a link to my site.: http://jsfiddle.net/jenborn/TQjm9/
Here is the modal form since apparently I have to include code if I link to a jsfiddle:
<form id="saveShoppingList" action="" method="POST" class="custom">
<div class="small-12 columns">
<div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
<div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
<div class="small-8 columns"><input type="text" id="name" name="name" /></div>
<div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
<div class="small-8 columns"><select id="beer_style" class="medium"><? echo $style_opt ?></select></div>
<div id="makemebold" class="large-4 columns">Keep Private:</div>
<div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
</div>
<div class="row">
<div class="small-6 large-centered columns">
<button type="submit" class="button radius">Go</button>
<button type="reset" class="button radius alert">Reset</button>
</div>
</form>

Answer 1

You have some major issues in your use of Foundation's grid. You have subsequent columns adding up to well over twelve, and columns nested within other columns without an interposing row. If you go through the Foundation Docs' grid section and rewrite your code accordingly, I'm betting your issue will be resolved. Pay special attention to the section titled "Infinitely nest your grid".
I would also suggest basic improvements like using a label element for your form labels, as browsers will know how to use them better. And for semantics, of course.