Disproportionate fluid image scaling within single row div

Question

I have a row of images sitting in a fluid width container, with a fixed width space between the images. If the container shrinks, the images need to fluidly resize and still fit the entire width of the container.

For this I'm using white-space: nowrap; and display: table; on the container and display: table-cell; on its children.

However, the images seem to be scaling at different factors, resulting in some images being extremely small, while others are only slightly smaller. I need them to scale proportionately and I don't know how! Any help would be hugely appreciated!

HTML:

<div class="container">
    <div class="row">
        <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12">
      <div>
        <div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-1.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-2.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-3.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-4.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-5.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-6.jpg" alt=""></div>        </div>
     </div>
    </div>
</div>

CSS:

.fluid-width-fixed-space
{
        white-space: nowrap;
        display: table;
}
.fluid-width-fixed-space > div
{
        display: table-cell;
}
.fluid-width-fixed-space img
{
        display: inline-block;
        max-width: 100%;
        height: auto;
        border: 1px solid #000;
        vertical-align: baseline;
}
.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}

For a live demo see this Pen: http://codepen.io/anon/pen/PZPjop

Answer 1

As I can see the problem here is in this:

.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}

That margin is too big on smaller screen sizes. So, either decrease that margin-right to smaller size base on the screen size, or on smaller screens put 100% of width for every image.