I'm a bit out of practice with HTML and CSS, so forgive me for what may seem like a silly question. I want the text boxes on each side to be aligned perfectly, rather than slightly staggered as they are now. I know that my code has some issues both in HTML and CSS, but I'm not sure exactly what needs to be modified. Also, I realize that all the boxes, except the last one, have the class leftBoxes even though not all of them are positioned on the left side, which is confusing.
Here's the link to the jsfiddle. PLEASE NOTE that the small preview on jsfiddle doesn't display correctly when viewed in full screen mode. You can see an accurate representation of how it should look in full screen here.
Below is the snippet of my code:
HTML:
<body>
<form>
<label for="son">Sales Order Number:</label>
<input type="text" class="leftBoxes" id="son" name="son">
<label for="shipname">Ship to Name:</label>
<input type="text" class="leftBoxes" id="shipname" name="shipname">
<br>
<label for="arnum">AR Division Number:</label>
<input type="text" class="leftBoxes" id="arnum" name="arnum">
<label for="shipadd1">Ship to Address 1:</label>
<input type="text" class="leftBoxes" id="shipadd1" name="shipadd2">
<br>
<label for="cnum">Customer Number:</label>
<input type="text" class="leftBoxes" id="cnum" name="cnum">
<label for="shipadd2">Ship to Address 2:</label>
<input type="text" class="leftBoxes" id="shipadd2" name="shipadd2">
<br>
<label for="custponum">Customer PO Number:</label>
<input type="text" class="leftBoxes" id="custponum" name="custponum">
<label for="city">Ship to City:</label>
<input type="text" class="leftBoxes" id="city" name="city">
<br>
<label for="orderdate">Order Date:</label>
<input type="text" class="leftBoxes" id="orderdate" name="orderdate">
<label for="state">Ship to State:</label>
<input type="text" class="leftBoxes" id="state" name="state">
<br>
<label for="zip">Ship to Zip Code:</label>
<input type="text" class="rightBoxes" id="zip" name="zip">
</form>
</body>
CSS:
body {
background-color: lightblue;
text-align: center;
}
.leftBoxes {
display: inline-block;
margin-right: 100px;
}
.rightBoxes {
display: inline-block;
margin-left: 100px;
}