@Tempest99

Пробелы при адаптивной в хэдере и футере,как устранить?

не могу въехать как убрать пробелы,отмеченные красным,можете помочь разобраться?
5a2335a6ed501843647518.jpeg
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>КиноМонстр</title>
	<meta name="description" content="КиноМонстр - это сайт о кино"/>
	<meta name="keywords" content="Фильмы, hd, фильмы онлайн"/>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600i,700,800" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div id="page-wrap">
	<main>
		<div class="header">
			<div class="logo">
				<div class="logo_text">
					<a href="index.html"><h1>КиноМонстр</h1></a>
					<h2>Кино - наша страсть!</h2>
				</div>
			</div>


					<div class="menubar">
						<ul class="menu">
							<li class="selected"><a href="index.html">Главная</a></li>
							<li><a href="#">Фильмы</a></li>
							<li><a href="#">Сериалы</a></li>
							<li><a href="contacts.html">Контакты</a></li>
						</ul>
						
					</div>
			
		</div>



					<div class="site_content">
						<div class=" sidebar_container">
							<div class="sidebar">
								<h2>Поиск</h2>
								<form method="post" action="#" id="search_form">
									<input type="search" name="search_field" placeholder="Ваш запрос">
									<input type="submit" class="btn" value="Найти">
									
								</form>
							</div>

							<div class="sidebar">
								<h2>Вход</h2>
								<form method="post" action="#" id="login">
									<input type="text" name="login_field" placeholder="Логин">
									<input type="password" name="password_field" placeholder="Пароль">
									<input type="submit" class="btn" value="Войти">

								</form>
										<div class="lables_passreg_text">
											<pre><span><a href="#">Забыли пароль?</a></span>  <span><a href="#">Регистрация</a></span></pre>
										</div>
									
							</div>


							<div class="sidebar">
								<h2>Новости</h2>
								<p>30.06.2018</p>
								<p>Мы подключили расширенный поиск</p>
								<p class="news"><a href="#">Читать</a></p>
							</div>


							<div class="sidebar">
								<h2>Рейтинг фильмов</h2>
								<ul>
									<li><a href="#">Рок звезда</a><span class="raiting">8</span></li>
									<li><a href="#">Красный дракон</a><span class="raiting">7.7</span></li>
									<li><a href="league.html">Лига справедливости</a><span class="raiting">7.4</span></li>
									<li><a href="mama.html">Мама</a><span class="raiting">7.2</span></li>
								</ul>
								
									

								
							</div>
						

						</div>


						<div class="content">
							<div class="films_block">
								<h2>Новые фильмы</h2>
								<a href="league.html"><img src="assets/img/league.png"></a>
								<a href="mama.html"><img src="assets/img/mama.png"></a>
								<a href=""><img src="assets/img/rockstar.png"></a>
								<a href=""><img src="assets/img/reddragon.png"></a>
							</div>

							<div class="films_block">
								<h2>Новые сериалы</h2>
								<a href=""><img src="assets/img/malenkaya-lozh-po-krupnomu_serialochka_6.png"></a>
								<a href=""><img src="assets/img/nastoyaschiy-detektiv_serialochka.png"></a>
								<a href=""><img src="assets/img/odnazhdy-nochyu_serialochka_20.png"></a>
								<a href=""><img src="assets/img/zapadnyy-mir_serialochka_7.png"></a>
							</div>
							<hr>


							<div class="posts">
								<div class="post_content">
									<h2>Warner Bros. заставила Джосса Уидона переснять первую сцену "Лиги справедливости"</h2>
									<p>Открывающий эпизод фильма "Лига справедливости" был снят не Заком Снайдером, а Джоссом Уидоном, однако первая его версия не понравилась руководству Warner Bros., которое потребовало сделать сцену более мрачной. Об этом рассказал в интервью изданию Men`s Fitness актер Холт МакКэллани, принимавший участие в съемках. <a href="#">Читать</a></p>
									

								</div> 

									<div class="post_content">
									<h2>Тизер мультфильма "Суперсемейка 2" установил абсолютный рекорд</h2>
									<p>Тизер мультипликационного фильма студии Pixar "Суперсемейка 2" установил новый абсолютный рекорд в количестве просмотров среди анимационных проектов. Как сообщает издание Comic Book, он получил более 113 миллионов просмотров. Такой впечатляющий результат позволил ролику войти в десятку самых просматриваемых в истории кинематографа вообще.</p><a href="#">Читать</a>
								</div>


							</div>
						</div>




					</div>
</div>
					<div class="footer">
						<ul class="menu_footer">
							
							<li><a href="index.html">Главная</a></li>
							<li><a href="#">Фильмы</a></li>
							<li><a href="#">Сериалы</a></li>
							<li><a href="contacts.html">Контакты</a></li>
						
						</ul>
						
						<span class="copyright">КиноМонстр 2018</span>
						
					</div>
		
		







		</div>	

		




	</main>


</body>
</html>


.header { 
	min-width: 1200px;
	height: 150px;
	background-color: darkslateblue;
}

.main, .logo, .menubar, .site_content, .footer {
	margin-left: auto;
	margin-right: auto;
}	

.logo {
	width: 1100px;
	font-size: 1.3em;
	
}	

.logo_text {
	margin-left: auto;
	margin-right: auto;
}


.logo_text a  {
	text-decoration: none;
}	

.logo h1, h2 {
	font: normal 220% 'open sans', sans-serif;
	letter-spacing: 0.3em;

}

.logo h1 {
	color: white;
	
}

.logo h2 {
	color: #D3D3D3;
	font-size: 0.9em;
	padding-right: 85px;

}

.menubar {
	width: 1100px;
	margin-top: 50px;
	padding-right: 13%;
}

ul.menu {
	text-align: center;
}

ul.menu li {
	list-style: none;
	margin-right: 8%;
	display: inline;
	text-align: left;
}


ul.menu li a {
	text-decoration: none;
	color: #F5F5F5;
	font: normal 100% 'open sans', sans-serif;

}

ul.menu li a:hover {
	color: #90EE90;
}

ul.menu li.selected a {
	color: #32CD32;
}

/*Стили для Хэдера-конец*/


/*Стили для футера-начало*/

.footer {
	
	min-width: 1200px;
	height: 100px;
	background-color: darkslateblue;
	margin: 0 auto;
	text-align: center;
	

}

.menu_footer {
	width: 98%;
}

.footer ul li  {
	display: inline-block;

}

.footer li {
	margin: 10px;
	list-style: none;
}

.footer ul li a {
	color: #808080;
	font: normal 85% 'trebuchet ms', arial;
}

.footer ul li a:hover {
	color: white;
}

.page-wrap:after {
	content: ""
	display: block;
	height: 100px;
}

.page-wrap {
	min-height: 94%;
	margin-bottom: -10px;
}

/*Стили для футера-конец*/
  • Вопрос задан
  • 188 просмотров
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега CSS
Ну ты где-то с отступами накосячил, возможно с сайдбаром. Выложенный код бесполезен, залей на jsfiddle или codepen чтоб посмотреть в живую.
Ответ написан
smolyakov770
@smolyakov770
Веб Дизайнер Верстальщик
В hader и footer классы добавьте width: 100%; и все
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы