Some of my floated DIVs don't align in Chrome and Firefox

Question

I would like to ask for some help with my problem. I have a large form, and I've decided to make it 2 columns for easier readability. I have a container DIV, and there are DIVs inside it sectioning it to 2 parts. I've left aligned the inside DIVs to float next to each other. In IE11, it (mostly) works, but for some reason, it doesn't work like I intended on other browsers: there are "gaps" between some of the DIVs.

Here's the code:

.container {
 width: 100%;
 font-size: 80%;
}


.contentwrapper {
 width: 80%;
  margin: 0 auto;
}

.Box {
 border: black 1px dotted; 
 padding: 1em;
 margin: 0 auto 3% 0;
 min-width: 55em;
 overflow: hidden; 
}

.Box .Header {
 background-color: #f7f7f7;
 font-weight: bold;
 font-size: 110%;
 padding-left: 5px;
 padding-right: 5px;
}

.Section {
 width: 45%;
 float: left;
 padding: 5px;
 display:inline-block;
 background-color: red;
 vertical-align: bottom;
}



.Section .Question {
 width: 32%;
 float: left;
}

.Section .Answer {
 text-align: left;
 width: 65%;
 float: left;
}

.Section .help {
 width: 15px;
 float:right;
 background-image: url("images/helpbutton.png");
 background-repeat: no-repeat;
}

.Section .Sectioninput, .Section select {
 width: 95%
}

.Section .smallInput {
 width: 5em;
}

.Section #orszagS{width: 28%}
.Section #countryT{width: 48%}
.Section #cityname{width: 50%}

 <div class="container"> 
  <div class="contentwrapper">
   <fieldset class="Box">
    <legend class="Header">Alapadatok</legend>
    <div class="Section">
     <div class="Question"><label for="countryT">Country</label></div>
     <div class="Answer">
      <select id="countryS" class="smallInput">
        <option value="hungary">Hungary</option>
        <option value="other">Other</option>
      </select>
      <input type="text" class="Sectioninput required" id="countryT" name="countryT" value="Hungary" disabled />
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="county">County</label></div>
     <div class="Answer">
      <select name="county" id="county" class="required">
        <option value=""> </option>
        <option value="1">Option 1</option>
        <option value="2">Option 12</option>
      </select>
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="cityname">City</label></div>
     <div class="Answer">
      <input type="text" class="smallInput required" name="zipcode" value="" placeholder="Zip Code"/>
      <input type="text" class="required" id="cityname" name="cityname" value="" placeholder="City"  />
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="location">Location</label></div>
     <div class="Answer required">
      <select name="location" id="location">
        <option value=""> </option>
        <option value="1">Outside</option>
        <option value="0">Inside</option>
      </select>
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="bnumber">Number</label></div>
     <div class="Answer">
      <input type="text" class="Sectioninput required" name="bnumber" id="bnumber" value="" />
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="relnumbers">Related Numbers</label></div>
     <div class="Answer">
      <input type="text" class="Sectioninput" name="relnumbers" id="relnumbers" value="" />
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="address">Address</label></div>
     <div class="Answer">
      <input type="text" class="Sectioninput" name="address" id="address" value="" />
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="name">Name</label></div>
     <div class="Answer">
      <input type="text" class="Sectioninput required" name="name" id="name" value="" />
     </div>
     <div class="help"><br /></div>
    </div>
    <div class="Section">
     <div class="Question"><label for="function">Function</label></div>
     <div class="Answer">
      <input type="text" class="Sectioninput" name="function" id="function" value="" />
     </div>
     <div class="help"><br /></div>
    </div>
   </fieldset>
 </div>
 </div>

I made my inside DIVs with a red background, so it's easier to see the white gap. What can I do to make 2 DIVs next to each other in each row?

Thanks in advance!