Could you please review the following code:
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<form class="form-horizontal">
<div class="col-md-3">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="col-md-3">
<input type="text" class="form-control input-lg" placeholder="Your Short Description">
</div>
<div class="col-md-3">
<input type="text" class="form-control input-lg" placeholder="Your Email Address">
</div>
<div class="col-md-3">
<button type="submit" class="form-control input-lg">Submit</button>
</div>
</form>
</div>
</div>
I am facing an issue with the layout created by the above code. When the screen size reaches a point where the elements are displayed horizontally, I notice unwanted spacing between them. Upon investigation, it appears that the padding introduced by col-md-3 is causing this. How can I eliminate or reduce this spacing between each of the 4 controls?
Please refer to this link for a visual representation of the issue (pay attention to the horizontal space): Link