Aligning, floating and centering images responsively

Question

I'm trying to figure out how to code my HTML & CSS to have the 3 screenshots images align up like in the screenshot below.

The idea is when the user resizes the window smaller the images on the left and right should move in towards the center, or tighter behind the main image and the main image always stays centered.

My Dev Link: http://leongaban.com/portfolio/athenasweb/

My CodePen http://codepen.io/leongaban/pen/AwJFt

And tips or direction would be super appreciated! :D

HTML

<div class="pattern">

    <div class="athena_thumbs">

        <div class="first">
            <img src="../../images/athena1.jpg"/>
        </div>

        <div class="second">
            <img src="../../images/athena2.jpg"/>
        </div>

        <div class="third">
            <img src="../../images/athena3.jpg"/>
        </div>

    </div>

</div>

CSS

div.inner .pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
    background-repeat: repeat;
    z-index:2;
 }    

.athena_thumbs {
    position: absolute;
    max-width: 1000px;
    margin: 250px auto 0;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    float: left;
    left: 25%;
    right: 25%;
    z-index: 3;
}

.athena_thumbs .second {
    position: relative;
    float: left;
    left: 10%;
    right: 5%;
    z-index: 2;
}

.athena_thumbs .third {
    position: relative;
    float: left;
    right: 10%;
    left: 5%;
    z-index: 1;
}

Answer 1

Running late for a meeting. But, if you take a look at

Code Pen: http://codepen.io/anon/pen/bazEr

.athena_thumbs {
    position: absolute;
    width: 90%;
    margin-left: 5%;  
    text-align: center;
    overflow: hidden;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    z-index: 3;
}

.athena_thumbs .second {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

.athena_thumbs .third {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

I think this will get you going in the correct direction. There is nothing in the way of cross-browser checking. Just the basic according effect more or less in place.

Hope this helps.