css - メディアの画面幅の問題に対する Web サイトの最適化 (@media css)

Question

応答性を高めたいため、@media css プロパティを配置した Web ページがあります。画像付きのヘッダーがあります。通常のPC画面では問題なく見えますし、クロムに最小幅を設定しても問題ありません。しかし、私の携帯電話 (nexus 4) ではうまく見えません。画像が画面の中央に位置合わせされていません。

ここにページがあります: PAGE。

私の携帯電話では、次のようになります。

次のコードを試しましたが、何も機能しませんでした:

HTML :

<header>
   <div class="container_12">
      <div class="grid_12">
         <h1>
              <img src="images/logo.png">  
        </h1>
        <div class="clear">
        </div>
      </div>
   </div>
 </header>

CSS :

 @media only screen and (max-width: 479px) 
 {
    body 
    {
       min-width:300px;
    }

    header h1 
    {
       margin: 20px 0px 0px;
       float: none;    
    }
 }

クラス "container_12" 、クラス "grid_12" の問題ではないと言わざるを得ません。これは、(画像付きの h1 を除いて) ナビゲーション メニューも含まれており、これが中央にあるためです。