Задать вопрос
dicem
@dicem
html

Почему блок слетает на хэдер?

Здравствуйте, верстаю я себе такой верстаю и обнаруживаю следующий артефакт(Отмечено красным):
5b476b18a08c7580849790.png
Вот этот белый прямоугольник вылез собственно потомучто я его сверстал, однако, я его сверстал после хэдера и после слайдера, а появился он прямо на слайдере.
прикладываю архив с кодом, ибо на jsfiddlе очень долго будет с загрузкой изображений и прочих файлов.
Скачать архив,
а также HTML:
tyt HTML
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Мир Ванны</title>

	<link rel="stylesheet" href="style/reset.css">
	<link rel="stylesheet" href="style/grid12.css">
	<link rel="stylesheet" href="style/style.css">

	<style src="src/jquery.js"></style> <!-- v2.2.4 -->
	<script src="https://use.fontawesome.com/c30deb5506.js"></script>
</head>
<body>
	
	<header>
		<div class="header__topbar container">
			<div class="col-clear col-lg-4 col-lg-offset-8 col-md-4 col-md-offset-7 col-sm-6 col-sm-offset-6 col-xs-12">
				<div class="topbar__nav">
					<div class="nav__item"><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></div>
					<div class="nav__item"><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></div>
					<div class="nav__item"><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></div>
					<div class="nav__item">
						<form method="GET" class="nav__search">
							<i class="fa fa-search" aria-hidden="true"></i>
							<input type="text" id="search" name="search" placeholder="Поиск">
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="header__main container">
			<div class="main__logo col-clear-left col-lg-3">
				<a href="#"><img src="img/logotype.svg" class="img-responsive" alt=""></a>
				<a href="tel:+73745695854" class="main__phone">+7 (374) 569 58 54</a>
			</div>
			<nav class="col-clear-right col-lg-9">
				<a href="#" class="main__nav--current">Каталог</a>
				<a href="#">Акции</a>
				<a href="#">Оплата</a>
				<a href="#">Доставка</a>
				<a href="#">Контакты</a>
			</nav>
		</div>
		<div class="header__offer" style="background-image: url(img/offer/1.jpg)">
			<div class="offer__content container">
				<img src="img/wave.svg" alt="">
				<div class="content__wrapper">
					<p>Скидки на</p>
					<p>коллекцию 2017</p>
				</div>
			</div>
		</div>
	</header>
	
	<div class="content">
		<div class="catalog container"></div>
	</div>

</body>
</html>


и CSS:
тут CSS
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=cyrillic');
@import url('fonts/ProximaNova/font.css');

header{
	background: #00617E;
	height: 30px;
}

.header__topbar{
	width: 1060px;
}

.topbar__nav{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

.topbar__nav > .nav__item > a{
	display: block;
	margin-top: 5px;
	padding: 0 25px;
	border-right: 1px white solid;
}

.topbar__nav > .nav__item:first-child > a{
	padding-left: 0;
}

.topbar__nav > .nav__item:last-child > a{
	padding-right: 0;
	border-right: none;
}

.topbar__nav > .nav__item:nth-child(3) > a{
	border-right: none;
}

.topbar__nav > .nav__item > a{
	font-size: 14px;
	color: white;
}

.topbar__nav > .nav__item > .nav__search{
	position: relative;
	overflow: hidden;
	
	font-family: 'Roboto';
	line-height: normal;
	font-size: 14px;
	color: #00617E;
}

.topbar__nav > .nav__item > .nav__search > i{
	position: absolute;
	top: 7px;
	left: 19px;
}

.topbar__nav > .nav__item > .nav__search > input{
	font-family: 'Roboto';
	letter-spacing: -0.01em;
	height: 30px;
	border-width: 0;
	background-color: #ccdfe5;
	padding-left: 47px;
	color: #00617E;
	width: 150px;
}

.topbar__nav > .nav__item > .nav__search > input::-webkit-input-placeholder,
.topbar__nav > .nav__item > .nav__search > input::-moz-placeholder,
.topbar__nav > .nav__item > .nav__search > input:-moz-placeholder,
.topbar__nav > .nav__item > .nav__search > input:-ms-input-placeholder{
	font-size: 14px;
	color: #00617E;
	opacity:1;
}

/*
 *  Header Main
*/

.header__main{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	background-color: white;
	padding: 19px 0 16px 0;
	width: 1060px;
}

.header__main > .main__logo .main__phone,
.header__main > .main__logo .main__phone:hover,
.header__main > .main__logo .main__phone:focus,
.header__main > .main__logo .main__phone:active{
	display: block;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 22px;
	font-weight: 500;
	text-decoration: none;
	margin-top: 7px;
	color: black;
}

.header__main > nav{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.header__main > nav > a{
	font-family: 'Roboto', Arial, sans-serif;
	font-style: normal;
	font-weight: bold;
	line-height: normal;
	font-size: 16px;
	color: black;
	text-decoration: none;
	padding-bottom: 5px;
}

/*
 *  Header offer
*/

.header__offer{
	width: 100%;
	height: 660px;
	display: flex;
	align-items: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.header__offer > .offer__content{
	position: relative;
	width: 1060px;
	display: flex;
}

.header__offer > .offer__content > img{
	position: absolute;
	width: 160px;
}

.header__offer > .offer__content > .content__wrapper{
	margin-top: 24px;
	margin-left: 74px;
	width: 530px;
	height: 163px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.8);
}

.header__offer > .offer__content > .content__wrapper p{
	font-family: 'Proxima Nova Rg';
	font-size: 48px;
	font-weight: 600;
	line-height: 56px;
	text-transform: uppercase;
	color: #000;
}

.header__offer > .offer__content > .content__wrapper p:nth-child(2){
	font-weight: bold;
	font-size: 30px;
	line-height: 35px;
}

/*
 *  Catalog
*/

.catalog{
	background: white;
	padding: 80px 0;
}

.catalog > .catalog__title{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/*
 *  Bootstrap Extension
*/

.container {
    padding-left: 0;
    padding-right: 0;
}

.col-clear{
	padding-left: 0;
	padding-right: 0;
}

.col-clear-left{
	padding-left: 0;
}

.col-clear-right{
	padding-right: 0;
}

.img-responsive{
	max-width: 100%;
	height: auto;
}



Ссылка на CodePen: CodePen.io
  • Вопрос задан
  • 87 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
vetero4eg
@vetero4eg
Frontend
Было бы проще вам помочь, залей вы код куда-нибудь на Codepen или jsFiddle. Так первое, что бросилось в глаза в разметке - ну есть у вас container, есть у вас col. А где row??

Посмотрите внимательнее документацию bootstrap, если хотите его использовать. Вы сейчас это делаете несколько... странно.
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Внесение изменений в Open Source Delphi программу
27 нояб. 2024, в 23:27
8000 руб./за проект
Создать многостраничный дизайн WEB-приложения (сайта) в бьюти-сфере
27 нояб. 2024, в 22:29
50000 руб./за проект
Разработать приложение для Android и IOS
27 нояб. 2024, в 21:14
70000 руб./за проект
Ещё заказы