@kirillgenets

Вторая строка съехала под первую Grid CSS. В чем может быть проблема?

Верстаю свой первый макет при помощи технологии grid css. Столкнулся с неведомой мне проблемой. Вторая строка почему-то съезжает под первую, в чем может быть проблема? (остальные блоки ведут себя нормально)
Скриншот проблемы:
5c06c1ab314f3711771251.jpeg
Код body:
body {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 570px 500px 500px 500px 900px 500px 600px;
}

Код хедера:
/*-----------
HEADER
----------*/	

.header {
	background: url(../img/heroImage.png);
	background-size: cover;
	height: 100%;
	position: relative;
	padding-bottom: 250px;
	grid-column-start: 1;
	grid-column-end: 5;
}

/*TOP PART OF HEADER*/

.header__hedader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 90px 210px 200px 90px;
}

.header__logo {
	height: 80px;
	width: 80px;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 60px;
	font-weight: 700;
}

.header__menu-button {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.header__menu-text {
	font-weight: 300;
	text-transform: uppercase;
	margin-top: 10px;
}

.header__menu-line {
	height: 5px;
	width: 30px;
	background-color: #000;
	margin-top: 5px;
}

.header__menu-line:first-child {
	margin-top: 0;
}

/*CONTENT OF HEADER*/

.header__content {
	padding-left: 200px;
}

.header__heading_big {
	font-size: 72px;
	font-weight: 300;
	margin-bottom: 50px;
}

.header__text {
	font-size: 30px;
	font-weight: 300;
}

.header__triangle-opacity {
	height: 0px;
	width: 0px;
	border: 410px solid transparent;
	border-right: 410px solid #42b7c8;
	border-bottom: 410px solid #42b7c8;
	opacity: 0.302;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
}

Код съезжающих блоков:
/*-------------
2nd BLOCK
-------------*/

.about__photo {
	grid-column-start: 1;
	grid-column-end: 3;
	height: 500px;
	background-size: cover;
	background: url(../img/aboutPhoto.png) no-repeat;
}

/*------------
3d BLOCK
-------------*/

.about__information {
	grid-column-start: 3;
	grid-column-end: 5;
	color: #666666;
	background: #f3f1ef;
	height: 500px;
	box-sizing: border-box;
	padding-top: 110px;
	padding-bottom: 120px;
	padding-left: 60px;
}

.about__content {
	max-width: 490px;
}

.about__heading {
	margin-bottom: 50px;
}
  • Вопрос задан
  • 206 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы