Unterschiedlicher Monitor/Auflösung, anderes Layout

Question

Ich habe dieses Logo auf der Website, die in der Mitte zwischen den Navbar-Menüs positioniert ist.

Hier ist ein Bild:

Logo Position

Das Problem ist, dass das Logo bewegt, wenn ich auf einen anderen Monitor oder Auflösung wechseln. Mache ich etwas falsch? Wie stelle ich es zwischen verschiedenen Auflösungen fest.

Hier ist der HTML-Code:

<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

Vor allem Mitte-Tag ist veraltet. Zweitens, Sie positionieren es 570px links von der rechten Kante des ersten positionierten (nicht statischen) Vorfahrenelements. Ich kann nicht sehen, welche Stile auf Ihre Klassen angewendet werden, damit ich nicht sehen kann, was das ist. Aber es würde definitiv auf der Grundlage der Auflösung bewegen.

Answer 2

Haben Sie schon von Responsive Design gehört? Schau, du musst deine CSS auch posten! Kannst du es auf jsfiddle schreiben?

Einige Beispiele:

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