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;
}