<select> tags are not staying within specified borders in Firefox
<p>I am creating an app the requires me to use 3 <code>&lt;select&gt;</code> tags that are stacked on top of each other. I need said tags to be flush with each other and also not leap over the background div's boundaries. I am making this work out fine in <em>Google Chrome</em>, but when I check it out <em>Firefox</em>, everything goes haywire. The select tags are nearly over the boundaries of the background div in unacceptable ways. </p>

<p><strong><em>A visual example of my problem (Firefox on left Google Chrome on right)...</em></strong>
<a href="https://i.stack.imgur.com/FA9Hb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FA9Hb.jpg" alt="enter image description here"></a></p>

<p><strong><em>Here is my HTML...</em></strong></p>

<pre><code>&lt;div id='wr-main-wrap'&gt;
    &lt;div id='wr-wrapper'&gt;
        &lt;div id='wr-opaq-background'&gt;&lt;/div&gt;
        &lt;div id='input-wrapper'&gt;
            &lt;div&gt;
                &lt;h3 class='label-text'&gt;work day length:&lt;/h3&gt;
                &lt;select ng-model='ratioControl.workday'&gt;
                    &lt;option value='1'&gt;1 Hour&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h3 class='label-text'&gt;break frequency:&lt;/h3&gt;
                &lt;select ng-model='ratioControl.breakspan'&gt;
                    &lt;option value='.5'&gt;30 Minutes&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h3 class='label-text'&gt;break lengths:&lt;/h3&gt;
                &lt;select ng-model='ratioControl.breaklength'&gt;
                    &lt;option value='5'&gt;5 Minutes&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong><em>Here is my CSS...</em></strong></p>

<pre><code>#wr-main-wrap{
    width: 19em;
    margin: 0 auto;
}

#wr-wrapper{
    width: 17em;
    margin: 3.5em auto;
}

#wr-opaq-background{
    position: absolute;
    width: 17em;
    height: 7em;
    background-color: white;
    z-index: -1;
    opacity: .7;
    border-radius: .25em;
}

#input-wrapper{
    margin: 5em 0;
    padding: .85em 0 0 .6em;
}

.label-text{
    font-family: 'Bebas Neue';
    margin-bottom: .8em;
    word-spacing: .1em;
    display: inline-block;vertical-align: top;
    width: 9em;
}

select{
    width: 6em;
    margin: 0 0 1.1em 0;
    background-color: white;
    border: black solid .1em;
}
</code></pre>

<p>I have check on stack overflow and the internets quite a bit, and have not found anything to answer my question. It is worth nothing that I am using <em>Angular</em> in case that may have something to do with it. </p>