Transform scale problem

by petebere

HTML

<div id="grey-bar">
    
    <div id="image-container">
    <img src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
    </div>

    </div>
        
        

    <h3 id="main-heading">How can I make the image above to stay in the middle after the 'tranform: scale' is applied for viewports below 500px? For some reason it stays on the right.</h3>
        
    
        
    <div id="grey-bar">
        
    <div id="bottom-heading-container">
    <h1 id="bottom-heading">This sentance stays in the middle after the 'tranform: scale' is applied.</h1>            
    </div>

    </div>

CSS

div#grey-bar {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-top:30px;
    padding-bottom:30px;
    background-color:grey;
    }

    div#image-container {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;   
    }

    @media screen and (max-width:500px) {
    div#image-container {
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    transform: scale(0.5);
    }
    }

    h3#main-heading {
    max-width:728px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    color:grey;
    }

    div#bottom-heading-container {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;   
    }

    @media screen and (max-width:500px) {
    div#bottom-heading-container {
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    transform: scale(0.5);
    }
    }

    h1#bottom-heading {
    max-width:728px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    color:white;
    }