Need some advice regarding a media query and CSS - html

Question

I'm hoping someone is able to help with an issue I'm currently having with a website I am designing. The media query for mobile is where I'm getting hung up.
This is an image of it.
The content isn't centered. I can fix the text simply with a text-align property, and I assume that I can just make the image display as a block and use margin: 0 auto to center it, the problem is that the container itself is not centered. I'm using Bootstrap, and it's all in a Bootstrap container.
I think part of the issue is that on small screens, I am hiding some content that is to the right of the content I can't get centered using Bootstrap's "hidden-xs" and "hidden-sm" properties.
Here is the code for the relevant section in the screenshot, plus my CSS for the media query. If anyone could point me in the right direction, I'd appreciate it.
/* Content Styles*/
.gas-content {
margin: 4.50em 0 4.50em 5%;
}
.left-content {
margin: 2.50em 0 2.50em 5%;
}
.content-container {
width: 75%;
float: left;
}
.test-container {
width: 25%;
float: left;
margin-top: -10px;
}
.move-up {
margin-top: -2em;
}
.move-down {
margin-top: 2em;
}
.img-center {
display: block;
margin: 0 auto;
}
.content-heading {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 1.50em;
}
.services li {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25em;
font-weight: 600;
}
.emergency-services li {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25em;
font-weight: 600;
}
.contact-box {
background-color: rgb(3, 17, 85);
padding: 2em 0 6.50em 0;
}
.contact-box h3 {
color: white;
text-transform: uppercase;
margin-left: 15px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.contact-info {
color: white;
margin-left: 15px;
}
.eztouselogo {
margin-left: 15px;
margin-bottom: 15px;
}
.services-left {
margin-right: 0.50em;
}
.content-paragraph {
font-family: 'Open Sans', sans-serif;
margin-bottom: 5em;
line-height: 2.25em;
}
#media (max-width: 991px) {
.test-container {
display: none;
}
.content-container {
display: block;
margin: 0 auto;
padding: 0 0 0 0;
float: none;
clear: both;
}
.container {
display: block;
margin: 0 auto;
float: none;
clear: both;
}
.pipes-img {
width: 75%;
height: 75%;
display: block;
margin: 0 auto;
float: none;
}
}
<!--Begin Main Content -->
<div class="container"> <!--New Container -->
<div class="content-container"> <!--Content on Left Side of Testimonials -->
<div class="row gas-content"> <!--Gas, Water, & Sewer Line Row -->
<div class="col-md-4">
<img class="pull-left img-responsive pipes-img" src="img/pipes.jpg">
</div>
<div class="col-xs-8 move-up">
<h3 class="content-heading">Gas, Water, & Sewer Line Inspection and Replacement in the Pittsburgh Area</h3>
<p class="content-paragraph">Vivamus id ante molestie, vehicula justo nec, facilisis justo. Sed efficitur feugiat accumsan. Nunc vitae fermentum nulla. Aliquam imperdiet nunc felis, et malesuada ligula molestie eget. Proin sodales dictum semper. Proin nec sodales quam. Maecenas ac erat non mauris laoreet volutpat. Proin egestas enim ut magna sagittis vulputate. Aenean non odio lacus. Nam vehicula metus viverra quam laoreet, nec interdum orci porttitor. Etiam gravida velit sit amet commodo suscipit. Cras est erat, scelerisque quis velit non, luctus molestie ex.</p>
<div class="row">
<div class="col-xs-5">
<ul class="services services-left">
<li>Sewer Lines</li>
<li>Gas Lines</li>
<li>Water Lines</li>
</ul>
</div>
<div class="col-xs-7">
<ul class="services services-right">
<li>Sewer Inspections</li>
<li>Water Heaters</li>
<li>Full-Service Plumbing</li>
</ul>
</div>
</div>
</div>
</div> <!--End Gas, Water, & Sewer Line Row -->

Answer 1

Change col-xs-8 to col-md-8 to match the same breakpoint as that on the image. Otherwise, the div wrapping the image will be 100%, but the sibling div will remain 2/3s width.

Answer 2

I don't think we (web developer) need to customize the media query of Bootstrap Framework. Bootstrap has built-in or default media query that fits to all devices such as :
Extra small devices Phones (<768px)
Class prefix : .col-xs-
Small devices Tablets (≥768px)
Class prefix : .col-sm-
Medium devices Desktops (≥992px)
Class prefix : .col-md-
Large devices Desktops (≥1200px)
Class prefix : .col-lg-
We just need to use it "cleverly" as it is.