Оптимизация веб-сайта для ширины экрана экрана (@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%; 
}