Как правильно отцентрировать / разместить эти изображения?

В разделе "О нас" моего портфолио (http://www.samnorris.co.nz) под заголовком "Digital Craftsman" у меня есть три скользящих раздела с текстовым блоком и рядом с ним изображение.

Мой сайт предназначен для того, чтобы быть отзывчивым, поэтому при меньших размерах экрана макет в этом разделе предназначен для перемещения (меньших размеров) изображений над блоком текста и - идеально - центрирования.

Я испытываю большие трудности с тем, чтобы эти изображения были сосредоточены на меньших размерах экрана, однако на экране @media и (максимальная ширина: 320 пикселей), например, они повсюду, маржа: 0 автоматически кажется, что это не влияет на все с какой-либо комбинацией настроек поплавка или дисплея, которые я пробовал... по размеру планшета @media screen и (min-width: 500px) и (max-width: 900px) Я управлял своего рода псевдоцентрированием, играя с неравномерные поля, но на самом деле не идеальны...

есть что-то, чего я здесь не хватает? есть ли более простой способ сделать это?

Соответствующий CSS

.about-featureimg {
    display: block;
    float: right;
}

.lionhead {
    background: url("../img/lionhead.jpg") no-repeat center;    
    width: 455px;
    height: 400px;
    margin: 0 0 15px 45px;
    display: block;
    float: right;   
}

.astroslinger {
    background: url("../img/astroslinger.gif") no-repeat center;    
    background-size: cover;
    min-width: 500px;
    height: 425px;  
    margin: 10px 0 15px 45px;   
}

.spacedude {
    background: url("../img/spacedude.jpg") no-repeat center;   
    width: 545px;
    height: 455px;
    margin: 10px 0 25px 75px;       
}

Пример запроса СМИ

.about-featureimg {
    display: block;
    margin: 0 auto;
}

.astroslinger {
    background: url("../img/astroslinger-sm.jpg") no-repeat center;     
    width: 325px;
    height: 220px;  
    margin: 25px 15px 25px 15px;
}

.lionhead {
    background: url("../img/lionhead-sm.jpg") no-repeat center;     
    width: 290px;
    height: 300px;  
    margin: 0 auto;
}

.spacedude {
    background: url("../img/spacedude-sm.jpg") no-repeat center;    
    width: 376px;
    height: 257px;
    margin: 0 auto; 
}

Визуальный пример того, что я имею в виду, это несколько сосредоточено, но не полностью:

Это не сосредоточено на всех: