задний фон заголовка не растягивается на menubar при адаптивной верстке

Здравствуйте.

Все делал по урокам все получалось. 

При адаптивной верстке для сотового телефона ( айфон 5/se) все получается до того момента когда выравнивают по центру menubar и задний фон header вытягивается и менюбар получается на его фоне. 

Помогите. у меня почему то задний фон не вытягивается, получается менюбар без заднего фона. Таоке ощущение что он не взаимодействует внутри контейнера  Header. 

Перепробывал наверно все. пришел только к одному мнению что блок заднего фона можно растянуть изменяя ( уеличивая) проценты с 20 и выше в файле стилей.

<div class="main">
      <div class="header">
             <div class="Logo">
                  <div class="Logo_text">
                         <h1><a href="/"> КиноСборник </a></h1>
                         <h2>Фильмы под настроение!</h2>
                  </div>
             </div>
             <div class="menubar">
                   <ul class="menu">
                        <li class="selected"><a href="index.html">Главная</a></li>
                        <li><a href="films.html">Фильмы</a></li>
                        <li><a href="#">Сериалы</a></li>
                        <li><a href="rating.html">Рейтинг фильмов</a></li>
                        <li><a href="kontakt.html">Контакты</a></li>
                  </ul>
            </div>
      </div>

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 568px) {
	.header {
		background-color: #257965;
		min-width: 100%;
		height: 20%;
		text-align: center; 
	}

	 .logo {
		width: 100%;
	}

	.site_content {
		width: 100%;
	}
		
	.menubar {
		width: 100%;
		height: 100%;
		}
	
	.site_content {
		width: 100%;
		text-align: center;
	}
	
	.sidebar_container {
		display: none;
	}

	.footer {
		display: none;
	}
	

	ul.menu {
		float: none;
	}	

	ul.menu li {
		margin: none;
		padding: none;
		float: none;
	}

	.logo h1 {
		font: normal 235% "century gothic", arial,sans-serif;
	}

	.logo h2 {
		font: normal 100% "century gothic", arial, sans-serif;
		color: white;
	}