Media Query styles not working

Question

For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?

HTML

<div class="headDiv">
    <div class="headPhone">
        <p class="fa fa-phone fa-xlg">000000</p>
    </div>
</div><!--headDiv-->

CSS

.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}

@media (max-width: 768px) {
   .headDiv .headPhone {float:none; margin: 0 auto;}
}

Answer 1

The float right was your issue and it sort of overrides the properties of display: block;. I answered this under the impression that you wanted the div to be full width. I added some color for checking.

.headDiv {
   display: block;
   max-width: 100%;
   background: yellow;
 }
 .headPhone {
   float: right;
   background: red;
 }


 @media (max-width: 768px) {
    .headDiv .headPhone {
      width: auto;
      float: none;
      margin: 0 auto;
    }
 }

Answer 2

You could use display:table so the div will shrink to fit the content automatically.

http://jsfiddle.net/Lb7ky6vL/

@media (max-width: 768px) {
    .headDiv .headPhone {
        float: none;
        display: table;
        margin: 0 auto;
    }
}