Elements won't align or become responsive properly. Images won't shrink

Question

I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:

1. The 4 images should be in the centre of the page, in stead they are off a bit.
2. The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
3. When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.

Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.

When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.

Html

  <div id="wrap">
    <div class="container">
      <div class="container image-links">
        <div class="row-helper">
          <div class="row text-center">
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
            <div class="col-md-3">
              <img src="http://placehold.it/355x354" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Css

-- This is compiled down from sass.

#wrap .container .image-links {
  width: 100%;
}

#wrap .container .image-links .row-helper {
  margin-left: 245px;
}

#wrap .container .image-links .row-helper .row .col-md-3 {
  margin-left: -2px;
  margin-right: -62px;
}

Answer 1

I guess this is what you want. Check here.

Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.

.img{
  width:100%;
}

So removed the css you gave for adjusting the margins.

And, for removing those gaps, just made padding as 0px as below.

#wrap .container .image-links .row-helper .row .col-md-3 {
    padding:0px;
}