CSS is not working, in responsive mode

See more:

CSS

HTML5

resize

responsive

Hello, friends i am working on a website, in which i had solved many things, but from last one week i am facing a problem. first check the following div

<div class="header-contact">
                <div class="header-phone">
                    <span class="fa-stack">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="raw-custom-phone fa fa-phone fa-stack-1x"></i>
                    </span>
                    <a class="raw-custom-white" href="tel:780-757-6400">780-757-6400</a>
                </div>
                <div class="header-email">
                    <span class="fa-stack">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="raw-custom-email fa fa-envelope fa-stack-1x"></i>
                    </span>
                    <a class="raw-custom-white" href="mailto:info@kolinsky.ca" target="_top">info@kolinsky.ca</a>
                </div>
            </div>

My friends the question is, when i apply css code for responsive ( I mean media Query) it does not work on ".header-phone", but when i apply same thing on ".header-email" it works correctly. why? please help me its urgent
Thanks in advance for your precious comments, reply, suggestions and most important is your precious time.