CSS Div Alignment Compatibility - html

Question

I am having some difficulty with the compatibility of my CSS for the HTML check boxes. For some versions of IE as well as when I place the live html into my PowerPoint, the center div will overlap with the left and the entire page is shifted left. I am not quite sure why this occurs.
html,
body {
height: 90%;
width: 90%;
padding: 5px;
margin: auto;
}
#googleMap {
height: 90%;
width: 90%;
padding: 5px;
margin: auto;
}
.Title {
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
#left_check {
position: absolute;
left: 10%;
}
#padded-left {
position: absolute;
padding-left: 1.4em;
}
#right_check {
float: right;
}
#mid_check {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#left_align {
display: inline-block;
text-align: left;
}
<ul style="list-style-type:none">
<div id="left_check">
<li>
<form>
<input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
<br>
<div id="padded-left">
<input id="west1" type="checkbox" class="location" value="west_coast">West
<br>
<input id="east1" type="checkbox" class="location" value="central_us">East
<br>
<input id="cent1" type="checkbox" class="location" value="east_coast">Central
</div>
</form>
</li>
</div>
<div id="right_check">
<li>
<form>
<input id="euro1" type="checkbox" class="location" value="europe">Europe
<br>
<input id="africa1" type="checkbox" class="location" value="africa">Africa
<br>
<input id="asia1" type="checkbox" class="location" value="asia">Asia
<br>
<input id="aust1" type="checkbox" class="location" value="australia">Australia
</form>
</li>
</div>
<div id="mid_check">
<div id="left_align">
<li>
<form>
<input id="canada1" type="checkbox" class="location" value="canada">Canada
<br>
<input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
<br>
<input id="south_am1" type="checkbox" class="location" value="south_america">South America
<br>
<input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
</form>
</li>
</div>
</div>
</ul>
Original CSS (Problems with some pc IE)
With Flex
IE Problems (new)

Answer 1

This is how you can do it, if I got your question right.
ul {
display: flex;
padding: 0px !important;
}
ul > div {
/* width: 30%; */
flex-grow: 1;
}
ul > div#right_check {
order: 3;
}
ul > div#mid_check {
order: 2;
}
ul > div#left_check {
order: 1;
}
div#mid_check li {
text-align: center;
}
div#right_check li form,
div#mid_check li form {
text-align: left;
}
div#right_check li {
text-align: right;
}
form {
height: 39px;
width: auto;
display: inline-block;
}
#map-canvas {
height: 500px;
width: 100%;
background: #AFAFAF;
}
div.frame {
width: 80%;
margin: auto;
}
<div class='frame'>
<div id="map-canvas"></div>
<ul style="list-style-type:none">
<div id="left_check">
<li>
<form>
<input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
<br>
<div id="padded-left">
<input id="west1" type="checkbox" class="location" value="west_coast">West
<br>
<input id="east1" type="checkbox" class="location" value="central_us">East
<br>
<input id="cent1" type="checkbox" class="location" value="east_coast">Central
</div>
</form>
</li>
</div>
<div id="right_check">
<li>
<form>
<input id="euro1" type="checkbox" class="location" value="europe">Europe
<br>
<input id="africa1" type="checkbox" class="location" value="africa">Africa
<br>
<input id="asia1" type="checkbox" class="location" value="asia">Asia
<br>
<input id="aust1" type="checkbox" class="location" value="australia">Australia
</form>
</li>
</div>
<div id="mid_check">
<div id="left_align">
<li>
<form>
<input id="canada1" type="checkbox" class="location" value="canada">Canada
<br>
<input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
<br>
<input id="south_am1" type="checkbox" class="location" value="south_america">South America
<br>
<input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
</form>
</li>
</div>
</div>
</ul>
</div>
Is this what you trying to get?