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

Question

我有一个网页，我在其中放了一些@media css属性，因为我想让它更具响应性。我有一个带图像的标题。对普通的电脑屏幕看起来很好，即使我把最小宽度放在镀铬上。但它在我的手机中看起来不太好（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）它们也包含导航菜单，而且这个位于中心。

Answer 1

我终于尝试了这个并且工作了。我愿意看到更多选项（答案）。

header h1  img 
{
    width: 100%;
}