CSS Images don't horizontally center on media query

Question

I am trying to display the image and its description in block form when the website has been shortened. I thought that setting margin-left and margin-right to auto, as well as setting display to block would center any image.

http://jsfiddle.net/8r5u22dm/

HTML

<div class="content">
    <div class="post-container">                
       <div class="post-thumb"><img src="img/flight_sun.png" id="first_image"/></div>
       <div class="post-content"><h1>Boeing 747</h1><p>             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquam eros, vel ultricies eros. Donec fermentum quis lacus quis lacinia. Quisque imperdiet, orci quis ultrices accumsan, sapien libero venenatis risus, in bibendum magna orci at ex. Ut lobortis, lorem id malesuada mollis, turpis ex finibus ipsum, sit amet semper est erat quis lorem. Nullam eu molestie eros, et ultricies magna. Mauris in eros condimentum, vehicula enim ac, scelerisque lorem. Cras commodo turpis viverra, vestibulum massa vitae, rutrum turpis. Sed lobortis elit quis ipsum molestie tincidunt.</p></div>
    </div>

    <div class="post-container">                
       <div class="post-thumb"><img src="img/flight_cloud.png" /></div>
       <div class="post-content"><h1>Sukhoi Su-35</h1><p>               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquam eros, vel ultricies eros. Donec fermentum quis lacus quis lacinia. Quisque imperdiet, orci quis ultrices accumsan, sapien libero venenatis risus, in bibendum magna orci at ex. Ut lobortis, lorem id malesuada mollis, turpis ex finibus ipsum, sit amet semper est erat quis lorem. Nullam eu molestie eros, et ultricies magna. Mauris in eros condimentum, vehicula enim ac, scelerisque lorem. Cras commodo turpis viverra, vestibulum massa vitae, rutrum turpis. Sed lobortis elit quis ipsum molestie tincidunt.</p></div>
    </div>

    <div class="post-container">                
       <div class="post-thumb"><img src="img/flight_clear.png" /></div>
       <div class="post-content"><h1>F-22 Raptor</h1><p>                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquam eros, vel ultricies eros. Donec fermentum quis lacus quis lacinia. Quisque imperdiet, orci quis ultrices accumsan, sapien libero venenatis risus, in bibendum magna orci at ex. Ut lobortis, lorem id malesuada mollis, turpis ex finibus ipsum, sit amet semper est erat quis lorem. Nullam eu molestie eros, et ultricies magna. Mauris in eros condimentum, vehicula enim ac, scelerisque lorem. Cras commodo turpis viverra, vestibulum massa vitae, rutrum turpis. Sed lobortis elit quis ipsum molestie tincidunt.</p></div>
    </div>
    <br><br>
</div>

CSS

.content {
    width: 75%;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.content p {
    font-size: 1.25em;
}

/* Decrease the width of description */

@media screen and (max-width: 1175px) {
    .post-content {
        width: 470px;
    }
}

/* Second decrease the width of description */
@media screen and (max-width: 990px) {
    .post-content {
        width: 410px;
    }
}

/* Collapse into block formation */
@media screen and (max-width: 995px) {
    .post-content {
        width: 100%;
        position: relative;
        margin-top: 300px;
    }

    .post-thumb {
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .post-thumb img {
        position: absolute;
        top: 0%;
        margin-top: 50px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
.container img {
    width: 200px;
    height: 200px;
    margin-right: 32px;
    border-radius: 200px;
}

.post-container{
    margin: 20px 20px 0 0;  
    overflow:hidden;
    position: relative;
}

.post-thumb img {
    float: left;
    clear:left;
    width: 200px;
    height: 200px;
    border-radius: 200px;

    position: absolute;
    top: 50%;
    margin-top: -100px;
    background: red;
}

.post-content {
    float:right;
    width: 618px;
}

.content h1 {
    font-style: italic;
}

/* Set maximum width for navigation */
@media screen and (max-width: 340px) {
    header nav a {
        padding: 0 0.4em;
        font-size: 1em;
    }

    .content {
        text-align: justify;
    }
}

Answer 1

As you can read here, for margin: auto to work your element must not have an absolute or fixed position (your images have absolute positioning) and they must not float (your images have float: left). If you remove those properties from your images they will be centered.