Moniteur différent/résolution, mise en page différente

Question

J'ai ce logo sur le site Web, qui est positionné au centre entre les menus de la barre de navigation.

Voici une photo:

Logo Position

Le problème est que le logo se déplace lorsque je passe à un autre moniteur ou la résolution. Est-ce que je fais quelque chose de mal? Comment puis-je le faire entre différentes résolutions.

Voici le code html:

<main class="site-main"> 
 
\t <center><img src="img/corelogo.png" alt="Post" height="180" width="180" style="position: absolute; top: -1px; left: 570px; margin: 0 auto;"></center> 
 
     <section class="hero_area"> 
 
      <div class="hero_content"> 
 
       <div class="container"> 
 
        <div class="row"> 
 
         <div class="col-sm-12"> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <br> 
 
          <h1>TeamSpan Global Solutions</h1> 
 
          <h2>Your partner in building satellite workforce teams.</h2> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section>

Answer 1

tout d'abord tag centre a été dépréciée. Deuxièmement, vous le positionnez 570px à gauche du bord droit du premier élément ancêtre positionné (pas statique). Je ne peux pas voir quels styles sont appliqués à vos cours, donc je ne vois pas ce que ce serait. Mais il se déplacerait certainement en fonction de la résolution.

Answer 2

Avez-vous déjà entendu parler de Responsive Design? Regardez, vous devez poster votre css aussi! Pouvez-vous l'écrire sur jsfiddle?

Quelques exemples:

https:// codepen.io/bootstrapped/pen/dGPZvR (remove space) 
https://www.bootply.com/mQh8DyRfWY 
https:// codepen.io/davidcochran/pen/Fkwys (remove space)