Codice css responsive che non si adatta

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

Codice HTML:

---

@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

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>

---