bootstrap grid system : how to remove gap between two columns - css

Question

I am using bootstrap grid to have the responsive layout.
But I am unable to remove gap between two columns.
my code is as follows:
<div class="contact-us-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2">
</div>
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-12 text-center">
<p class="contact-us-footer">Choose Share&Care as your development partner </p>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-12 text-center">
<a class="contact-us-link" href="../contact-us.php">
<i class="fa fa-envelope-o"></i> Contact Now!
</a>
</div>
</div>
</div>
</div>
my output is:
I want to remove the gap between partner and contact now button.
please help me is this regard.
My Solution
here is my solution:
<div class="contact-us-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-9 col-xs-12 contact-us-gap-p">
<p class="contact-us-footer">Choose Share&Care as your development partner </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 contact-us-gap-a">
<a class="contact-us-link" href="contact-us.php">
<i class="fa fa-envelope-o"></i> Contact Now!
</a>
</div>
</div>
</div>
</div>
here is my css file :
.contact-us-gap-p{
text-align: right;
}
.contact-us-gap-a{
text-align: left;
}
#media (max-width: 768px) {
.contact-us-gap-p{
text-align: center;
}
.contact-us-gap-a{
text-align: center;
}
}
This code is working fine for me.

Answer 1

Here I used css inline for semplicity, but using class is better. I simply aligned the text of the two div to reduce the gap between the two columns.
<div style="text-align: right;" class="col-lg-6 col-md-7 col-sm-8 col-xs-12 text-center">
...
</div>
<div style="text-align: left;" class="col-lg-4 col-md-3 col-sm-4 col-xs-12 text-center">
If you do not want this to apply in mobile version, insert this code into media query for screen only
....