Codice css responsive che non si adatta

[avid3919034]

Salve io sto impazzendo ho un problema il codice css che sto applicando.
Al ridemsionamento della pagina va bene ma quando lo pubblico il logo sul cel e tablet lo trovo in posizione sbagliata posto il codice per chiarire questo è il link http://www.dinapoliandrea.com

@media only screen and (min-width: 1200px) {
        
        body{
			background: #ffffff;
            
		}

        .center {
               
               margin-left: auto;
               margin-right: auto;
               width: 80%;
               height: 1000px;
               border: 3px solid green;
               padding: 10px;
             }


             #sfondo-intestazione {
                margin-left: auto;
               margin-right: auto;
               width: 100%;
               height: 800px;
               
}


#logo { 
  position: absolute; 
  top: 11%;
  left: 11%; 
  box-shadow: 0 8px 16px 0 rgba(228, 220, 220, 0.2), 0 6px 20px 0 rgba(233, 224, 224, 0.19); 
  width: 150px; 
  height: 150px; 
}





      /* fine 1200 ---------- */ 
    }

codice html

<div class="center">
    <img id="sfondo-intestazione" src="Immaginidelsito/sfondo.png"> 
     

<a href="index.html"><img id="logo" src="Immaginidelsito/logo.png"></a>
     <!-- ::::::::::::::sotto il div centrato:::::::::::::: -->                                       
</div>