異なるモニタ/解像度、異なるレイアウト

Question

このロゴはウェブサイト上にあります。このロゴは、navbarメニューの中央に配置されています。ここで

は絵です：

Logo Position

問題は、私は別のモニターや解像度に切り替えるとロゴが動くということです。私は何か間違っているのですか？異なる解像度間で固定する方法を教えてください。

ここで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

すべて中央タグの最初に廃止されましたが。次に、最初に配置された（静的ではない）祖先要素の右端から570ピクセル左に配置します。あなたのクラスにどのようなスタイルが適用されているのか分からないので、それが何であるか分かりません。しかし、それは間違いなく解決に基づいて移動します。

Answer 2

Responsive Designについて聞いたことがありますか？ 見て、あなたもあなたのCSSを投稿する必要があります！ jsfiddleに書き込めますか？

いくつかの例：

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