Здравствуйте! У меня проблема с позиционированием на сайте, поможете? - вопрос №3449378

В общем, я не нашел, как сюда загрузить файл, так что код будет тут (простите):
HTML:

УБРАЛ !DOCTYPE И ТЕГИ HTML ДЛЯ КОРРЕКТНОГО ОТОБРАЖЕНИЯ  Мой телефон — мегафон     TEKKEN КаменщикХлебЯпонский президент      Брайан,КаменщикХлеб оптом и в розницу    
  Стишок  Война утехи смерть всех техНа танках псы правительства кричат:«Эй, вон он!»Злобный безработный хлебоед, батонов лорд, ларьков всех богТри дня батрачит без баблаИ скрежет техники, огоньИ заберут МЕТАЛЛОЛОЛИз глубины души раздастся дикий крикРазверзнув небеса, голодным голосом пронзив сердца....Я КАМЕНЩИК, РАБОТАЮ ТРИ ДНЯ!!!    Обо мне: 

Меня зовут Брайан.Я обычный трудяга, каменщик, три дня работаю без зарплаты. Я очень голоден, поэтому в 2015 украл хлеб в ларьке, за что меня по сей день преследует полиция Сирии. Они не могут понять, что я съел его ещё 4 года назад, но ничего страшного, я их всех угощу своим виноградом!

     CSS:

body {margin: 0;font-family: Trebuchet MS, sans-serif;
font-size: 15px;line-height: 1.6;color: #333;}
*,*:before,*:after {box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {margin: 0;}

/* Container */.container {width: 100%;max-width: 1200px;margin: 0 auto;}


/* Intro */.intro {display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100vh;
background: url("../images/kamenshik.jpg") center no-repeat;-webkit-background-size: cover;background-size: cover;}
.intro__inner {width: 100%;max-width: 880px;margin: 0 auto;
text-align: center;}
.intro__title {color: #fff;font-size: 150px;font-weight: 700;text-transform: uppercase;line-height: 1;}
.intro__suptitle {margin-bottom: 20px;
font-family: Trebuchet MS, sans-serif;font-size: 72px;color: #fff;}

/* Header */.header {width: 100%;padding-top: 30px;
position: absolute;top: 0;left: 0;right: 0;z-index: 1000;}
.header__inner {display: flex;justify-content: space-between;align-items: center;}
.header__logo {padding-bottom: 20px;font-size: 30px;font-weight: 700;color: rgb(0, 0, 0);}

/* Nav */.nav {font-size: 20px;text-transform: uppercase;}
.nav__link {padding-bottom: 20px;display: inline-block;vertical-align: top;margin: 0 15px;position: relative;
color: rgb(0, 0, 0);text-decoration: none;
transition: color .1s linear;}
.nav__link:after {content: "";display: block;width: 100%;height: 3px;
background-color: #700f38;opacity: 0;
position: absolute;top: 100%;left: 0;z-index: 1;
transition: opacity .1s linear;}
.nav__link:hover {color: #700f38;}
.nav__link:hover:after,.nav__link.active:after {opacity: 1;}
.nav__link.active {color: #700f38;}

/* Button */.btn {margin-top: 60px;display: inline-block;vertical-align: top;padding: 8px 30px;
border: 3px solid #fff;
font-size: 14px;font-weight: 700;color: #fff;text-transform: uppercase;text-decoration: none;
transition: background .1s linear, color .1s linear;}
.btn:hover {background-color: #fff;color: #333;}


/* Slider */.slider {width: 100%;
position: absolute;bottom: 0;left: 0;z-index: 1;}
.slider__inner {display: flex;justify-content: space-between;}
.slider__item {width: 23%;padding: 20px 0;position: relative;
border-top: 3px solid #fff;opacity: .7;
font-size: 18px;color: #fff;text-transform: uppercase;}
.slider__item.active {opacity: 1;}
.slider__item.active:before {content: "";display: block;width: 70px;height: 3px;
background-color: #f38181;
position: absolute;top: -3px;left: 0;z-index: 1;}
.slider__num {font-size: 24px;font-weight: 700;}
/* Section */.section {padding: 80px 0;}
.section__header {width: 100%;max-width: 950px;margin: 0 auto 40px;
text-align: center;}
.section__suptitle {font-family: 'Kaushan Script', cursive;font-size: 24px;color: #333;}
.section__title {font-size: 30px;font-weight: 700;color: #333;text-transform: uppercase;}
.section__title:after {content: "";display: block;width: 60px;height: 3px;margin: 30px auto;
background-color: #f38181;}
.section__text {font-size: 15px;color: #999;}


/* About */.about {margin-top: 80px;display: flex;justify-content: space-between;}
.about__item {width: 380px;position: relative;
background-color: #95e1d3;}
.about__item:hover .about__img {transform: translate3d(-10px, -10px, 0);}
.about__item:hover .about__img img {opacity: .1;}
.about__item:hover .about__text {opacity: 1;}
.about__img {background: linear-gradient(to bottom, #f38181, #fce38a);
transition: transform .2s linear;}
.about__img img {display: block;transition: opacity .1s linear;}
.about__text {width: 100%;
font-size: 18px;color: #fff;text-transform: uppercase;font-weight: 700;text-align: center;opacity: 0;
position: absolute;top: 50%;left: 0;z-index: 2;transform: translate3d(0, -50%, 0);
transition: opacity .2s linear;}
* {margin: 0;padding: 0;}html,body {height: 100%;}.wrapper {display: flex;flex-direction: column;min-height: 100%;}.content {flex: 1 0 auto;}.footer {flex: 0 0 auto;}
(не спрашивайте, что за бред здесь написан)Проблема вот в чём: Первый блок отображается отлично, а второй уходит под первый. Вот скриншот:

Подскажите, как починить)