@media не excecuting css change

Question

У меня есть div, который относительно расположен и плавает влево. Я пытаюсь переместить его на

@medai@media only screen and (max-width : 975px) 
{ #logo { float:none; margin:0 auto; } 
    .main-menu-and-contact-wrap { display:none; margin-left:150px;} 
} 

Это не отражает изменение в браузере. Я что-то упустил в одном из контейнеров?

<div id="headcontainer"> 
     <div id="header" class="clearfix"> 
      <div id="headerTop" class="clearfix"> 
       <div id="email">Email Us: <a href="#">email@example.com</a></div><!-- End email --> 
       <div id="icons"> 
        <div class="icons"><img src="images/faceBook_animation.jpg" width="48" height="86" alt="facebook" /></div> 
        <div class="icons"><img src="images/linkedin_animation.jpg" width="48" height="86" alt="linkedin" /></div> 
       </div><!-- End icons --> 
      </div><!-- End headerTop --> 

     <div id="logo"><img src="images/sandpiperLogo.png" width="300" height="100" alt="logo" /></div> 
     <div class="main-menu-and-contact-wrap"> 
      <div id="phoneNumber" class="phone"><p>1-800-222-2522</p> 
      <span class="outer-strip" style="right: -607px; width:607px"></span> 
      </div><!-- End phoneNumber --> 
      <div id="navWrap"> 
       <nav> 
        <ul id="Navlist"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Register</a></li> 
         <li><a href="#">FloorPlans</a></li> 
         <li><a href="#">SitePlans</a></li> 
         <li><a href="#">Features</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </nav> 
      </div><!-- End naWrap --> 
     </div><!-- End main-menu-and-contact-wrap --> 

     </div><!-- End header --> 
    </div><!-- End headcontainer --> 

#headcontainer { 
    max-width: 100%; 
    background-color: #252a2b; 
} 

#header { 
    max-width: 1170px; 
    margin: 0 auto; 
    position: relative; 
    color: #000; 
    background-color: #252a2b; 

} 

#headerTop{ 
    position:relative; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #343a3b; 
    float:left; 
    width:100%; 
    margin-bottom:30px; 
    } 

#email{ 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 43px; 
    color: #929A94; 
    float:left; 
    background-image: url(../images/emailBG.jpg); 
    background-position: left; 
    background-repeat: no-repeat; 
    padding-left: 35px; 
    width:175px; 
    font-size: 12px !important; 
    } 

#icons{ 
    position:relative; 
    float:right; 
    } 

.icons{ 
    display: inline; 
    float: right; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #343a3b; 
    height:42px; 
    width:48px; 
    overflow:hidden; 
    } 

.icons img { 
    position: relative; 
    top: 0px; 
    transition: top .2s ease-in-out; 
} 
.icons img:hover { 
    top: -42px; 
} 

#logo{ 
    position:relative; 
    float:left; 
    } 

.clearfix { 
    *zoom: 1; } 
    .clearfix:before, .clearfix:after { 
    display: table; 
    content: ""; 
    line-height: 0; } 
    .clearfix:after { 
    clear: both; } 

/*---------------NAVIGATION MENU----------------*/ 

.main-menu-and-contact-wrap{ 
    position:absolute; 
    right:0px; 
    bottom:0; 
    } 

#navWrap{ 
    position:relative; 
    float:right; 
    margin-top:60px; 
    max-width:700px; 

Answer 1

У вас есть опечатка с @medai@media

Answer 2

Попробуйте использовать

@media and (max-width : 975px) 
{ 
    #logo { float:none; margin:0 auto; } 
    .main-menu-and-contact-wrap { display:none; margin-left:150px;} 
} 

Я уверен, если @medai была опечатка или нет, но выше, должны работать правильно.