针对媒体屏幕宽度问题的网站优化（@media css）

我有一个网页，我放了一些@media css属性，因为我想让它更具响应性。我有一个带有图像的标题。它看起来很好，以正常的电脑屏幕，即使我把最小宽度的铬。但在我的手机（Nexus4）上看起来不太好。图像未与屏幕中心对齐

这是页面：

在我的手机里，它看起来像这样：

我尝试了以下代码，但没有任何效果：

HTML:

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

---

我必须说，我相信这不是一个“容器12”类、“网格12”类问题，因为（除了带有图像的h1）它们还包括导航菜单，而这个菜单就在中间

我终于尝试了这个并成功了。我愿意看到更多的选择（答案）

---

标题的图像有多大？您是否有专门用于移动设备的标题图像？就像一个相同的标题，只是更小？因为您可以使用

@media

查询，专门为每个设备设置标题图像。@PatchGuru 420px是图像。我有350px，但它没有在中心对齐。我认为这是“h1”问题。或者我的手机屏幕小于300px（我设置的最小宽度）

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

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

header h1  img 
{
    width: 100%;
}