Form Inputs Not Aligned - html

Question

So I've come across an issue with my input box going out of bounds and I have no idea how to fix it. My select box and input box have the exact same CSS code. I've tried using max-width and vertical-align but both didn't work. Also tried using display: inline-block.
The difference between the 2 are exactly 4px even though both are set to 80% width
HTML
<form class="container_filterSelection">
<label>Product Category</label>
<select class="categorySelect">
<option value="0"></option>
<option value="1">Drills</option>
<option value="2">More Drills</option>
<option value="3">Give me them drills</option>
</select><br>
<label>Address</label>
<input type="text" class="locationSelect">
<button class="submit">Submit</button>
</form>
</html>
CSS
form {
width: 75%;
margin: auto;
background: white;
}
/* Category Dropdown */
.categorySelect {
width: 80%;
margin: 16px 10%;
padding: 16px 0;
}
/* Location Input */
.locationSelect {
width: 80%;
margin: 0 10% 16px 10%;
padding: 16px 0;
}

Answer 1

Try like this:
form {
width: 75%;
margin: auto;
background: white;
}
/* Category Dropdown */
.categorySelect {
width: 80%;
margin: 16px 10% 16px 10%;
padding: 16px 0;
}
/* Location Input */
.locationSelect {
width: 80%;
margin: 0 10% 16px 10%;
padding: 16px 0;
box-sizing: border-box;
}
<form class="container_filterSelection">
<label>Product Category</label>
<select class="categorySelect">
<option value="0"></option>
<option value="1">Drills</option>
<option value="2">More Drills</option>
<option value="3">Give me them drills</option>
</select><br>
<label>Address</label>
<input type="text" class="locationSelect">
<button class="submit">Submit</button>
</form>
Adding box-sizing: border-box; to .locationSelect appears to fix it. The browser's user agent stylesheet appears to be adding this property to select elements but not to input, so to make them look the same, you need to correct for that.