How to make the last horizontal form button smaller - css

Question

I have a 4-column horizontal form in Bootstrap 3 (latest version):
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Title is here</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 no-gutter">
<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 Title">
</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 btn-danger">Check The Price</button>
</div>
</form>
</div>
</div>
And the following CSS (to make the input fields next to each other):
.col-xs-12.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
Here's the issue. I want the button to be smaller (for it to take 2 columns instead of 3). So I changed the last <div> from col-md-3 to col-md-2 and got this:
http://www.bootply.com/JiNeG04Ifl
The code is the same like the pasted code above, just with the last <div> changed to col-md-2. Now, try to resize the viewport from 1194px to 992px (the medium size after the forms are switching to vertical). You will notice that the text overflows the box, although there is more than enough white space in the button itself.
How can I fix this? So far I've tried:
white-space: nowrap;
But the problem with this is that the text does not stay centered in the box, its alignment seems to be going off. Is there some better solution to keep the alignment centered?

Answer 1

Remove the l/r padding from the button...
.input-lg.btn-danger {
padding-left: 0;
padding-right: 0;
}
http://www.bootply.com/QkBiP8yHNE
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
/* CSS used here will be applied after bootstrap.css */
.margin-bottom-30 {
margin-bottom: 30px;
}
.margin-top-30 {
margin-top: 30px;
}
.col-xs-12.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
* {
border-radius: 0 !important;
}
.input-lg.btn-danger {
padding-left: 0;
padding-right: 0;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="margin-bottom-30">Title Here</h1>
</div>
</div>
<div class="row no-gutter">
<div class="col-xs-12 form no-gutter">
<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 Title">
</div>
<div class="col-md-3">
<input type="text" class="form-control input-lg" placeholder="Your Email Address">
</div>
<div class="col-md-2">
<button type="submit" class="form-control input-lg btn-danger">Check The Price</button>
</div>
</form>
</div>
</div>
</div>
<div id="push"></div>