I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired outcome. Additionally, I would prefer to avoid using float right if possible.
Below is the code snippet for reference:
CSS
.bookingForm {
height:450px;
background-color: #D3412A;
}
.bookingForm img {
width:200px;
margin:90px 0 0 170px;
}
form{
padding:20px 0 0 70px;
margin-left: 10%;
color:#fff;
}
.bookingForm .formColumn1,
.bookingForm .formColumn2{
float:left;
}
.bookingForm .formColumn2 {
margin-left: 50px;
}
.bookingForm .formColumn2 input{
margin-right:0;
}
select,input,textarea {
width:200px;
margin:8px 0;
}