how to better scale this image? (bootstrap) - css

Question

I might be going about this the wrong way. I have two columns, and the right one is an image. I set a padding on .back, and I want the image I created to both
be responsive. IE, resize proportionally so that parts of it are never cut off. I believe this is achieved right now already.
use all the space given to it. I don't understand why this image's right edge ends before the right side of the page. I've set width to 100%, using container-fluid, and the columns add up to 12. Thoughts?
As a second question, i've added text-center to the div around the image so why is the image not centered when the window size is very small?
.fluid-img {
width: 100%;
height: auto;
}
.back {
padding-top: 150px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'>
<div class='row'>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class='text-center'>
<h2 class="title"> Title</h2>
</div>
</div>
<!--//col-->
<div class='col-md-7 col-sm-12 col-xs-12'>
<div class='text-center'>
<img src = "http://i.imgur.com/g4sTWMZ.png" class = 'fluid-img'>
</div>
</div>
</div>
</div>
</div>

Answer 1

there is nothing wrong with the code.. the image you are using has huge blank space at the right side as it's a png image you cannot see it.. download the image and crop it.. your problem is solved

Answer 2

To better Scale your Image you should use img-responsive calss of bootstrap.
Your image ends before the right edge because it contains transparent pixels at the right side, I cropped your image and now it looks fine.
Your image was not getting centered because of the transparent pixels at the right side.
.fluid-img {
width: 100%;
height: auto;
}
.back {
padding-top: 150px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'back'>
<div class = 'container-fluid'>
<div class='row'>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class='text-center'>
<h2 class="title"> Title</h2>
</div>
</div>
<!--//col-->
<div class='col-md-7 col-sm-12 col-xs-12'>
<div class='text-center'>
<img src = "http://i.imgur.com/FFeYNDn.png" class= 'fluid-img img img-responsive'>
</div>
</div>
</div>
</div>
</div>