ウェブページのサイズにかかわらずimgとh1を整列させる

Question

ヘッダーにテキスト（ビジネス名）の横にイメージ（ロゴ）を挿入しようとしています。ページが小さいときにはうまく見えますが、ページが大型のコンピュータ画面を占めると、画像とテキストの間に余分なスペースがあります。

テキストをページの中央に配置し、イメージをテキストの左側に配置するようにしています。

<style> 
img { 
    float: left; 
    width: 90px; 
    height: 90px; 
    padding-left: 16%; 
    } 
h1 { 
    color: #0C234B; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    font-family: sans-serif; 
    font-size: 197%; 
    } 
</style> 

<header> 
<img src="logo.png"/> 
    <h1>Name of Business</h1> 
</header> 

Answer 1

margin-left: auto;が原因です。

Answer 2

私はこれが何をしたいあなたを与えるだろうと信じている

：

<style> 
    img { 
    width: 90px; 
    height: 90px; 

    position: absolute; 
    left: -90px; 
    } 
    h1 { 
    color: #0C234B; 
    text-align: center; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    font-family: sans-serif; 
    font-size: 197%; 

    display: inline-block; 
    width: auto; 
    position: relative; 
    padding-left: 10px; 
    } 

    header { 
    text-align: center; 
    min-width: 500px; /* Optional */ 
    } 
</style> 

<header> 
    <h1><img src="logo.png" /> Name of Business</h1> 
</header> 

重要な機能は、テキストがまだ正確にセンタリングされていることです（画像上position: absoluteは、ページフローからそれを除去するので）が、距離画像とロゴの間は、h1のパディングで固定されています。