HTML-Trouble centering my forms in the divs - html

Question

I am having troubles with centering and aligning the forms inside the divs
I can't get the green to size properly and centre the form inside the green.
BTW the pic is what it looks like on my computer, when you click the code snippet, it looks all jumbled.
<style type="text/css">
#div1 {
background-color: coral;
width: 33.33%;
float: right;
height: 200px;
text-align: center;
}
#div1_Child {
width: 100%;
height: 60%;
border: 0px solid blue;
margin: 0 auto;
text-align: center;
}
#div2 {
background-color: rgb(240, 191, 191);
width: 33.33%;
float: left;
height: 200px;
text-align: center;
}
#div2_Child {
width: 90%;
height: 60%;
border: 0px solid blue;
margin: 0 auto;
text-align: left;
}
#div3 {
background-color: aqua;
width: 33.33%;
margin: 0 auto;
height: 200px;
text-align: center;
}
#div3_Child {
width: 85%;
height: 60%;
border: 0px solid blue;
margin: 0 auto;
text-align: center;
padding: 5px;
}
label {
width: 200px;
display: inline-block;
text-align: right;
}
form {
border-radius: 10px;
background: green;
color: black;
width: 80%;
padding: 2px;
margin: 0 auto;
}
</style>
<div id="div1">Div1 Right
<h1>Lighter Load</h1>
<div id="div1_Child">
<form>
<label for="beams">Beam Thickness</label>
<select name="Beams" id="beam">
<option value="Select">Select</option>
<option value="3.5">3.5</option>
<option value="5.25">5.25</option>
<option value="7">7</option>
</select><br>
<label for="dead">Dead</label>
<input id="dead2" type="text" name="dead" onkeyup="ecCalc()"><br>
<label>Eccentric</label>
<input id="eccCalc" type="text" name="total"><br>
<label>Index</label>
<input type="text" id="ecc">
</form>
</div>
</div>
<div id="div2">Div2 Left
<h1>Post Height</h1>
<div id="div2_Child">
<form class="form">
<label for="column_Height">Column Height:</label>
<select id="column_Height" onchange="search1()";>
<option value="">Select</option>
<option value="90">89</option>
<option value="96">90</option>
<option value="102">96</option>
<option value="120">102</option>
<option value="144">120</option>
<option value="168">144</option>
<option value="192">168</option>
<option value="216">192</option>
<option value="216">216</option>
</select> <br>
<label for="value">Between</label>
<input type="text" id="value" size="4" disabled>
<label for="text">and</label>
<input type="text" id="text" size="4" disabled><br>
<label for="l_oad" class= "label1">Unfactored</label>
<input type="text" id="l_oad" onkeyup="search()" placeholder="Unfactored.." title="Load" size="15">
</form>
</div>
</div>
<div id="div3">Div3 Middle
<h1>Heaver Loads</h1>
<div id="div3_Child">
<form>
<label>Dead</label>
<input id="dead1" type="text" name="dead" onkeyup="total_1()" size="10px"><br>
<label>Live</label>
<input class="input1" id="live1" type="text" name="live" onkeyup="total_1()" size="10"><br>
<label>Total</label>
<input id="total1" type="text" name="total" size="10"><br>
</form>
</div>
</div>

Answer 1

Why won't you use flex box? For more info about flex box look here: link. For all row divs you can still use flexbox example flex-direction: row;. Width of items inside will corresponds to your screen width.
* { box-sizing: border-box; margin: auto; padding: auto; }
.container_main { width: auto; height: 400px; background: red; padding: 10px; display: flex; flex-direction: row; overflow: auto; }
.container_main .item { width: 100%; height: 100%; background: yellow; margin: 0 5px; padding: 5px }
.container_main form { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.container_main form .form_item { width: 100%; height: 32px; display: flex; flex-direction: row; align-items: center; justify-content: center; }
<div class="container_main">
<div class="item">
<form method="post">
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
</form>
</div>
<div class="item">
<form method="post">
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
</form>
</div>
<div class="item">
<form method="post">
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
</form>
</div>
</div>