Почему то section стоит ниже footer'a хотя footer самый последний, может не то где то написал как решить?

Question

Ерасыл Кудайбергенов @recovni

Начинающий программист

HTML
CSS

Почему то section стоит ниже footer'a хотя footer самый последний, может не то где то написал как решить?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/style.css" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans+TC:700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans+TC:700|PT+Serif&display=swap" rel="stylesheet">
</head>
<body>
	<header>
		<div class="container">
			<div class="heading clearfix">
				<img src="image/logo.png" alt="Erasyl" class="logo" width="215px">
					<nav>
						<ul class="menu">
							<li>
								<a href="index.html">Портфолио</a>
							</li>
							<li>
								<a href="#vniz">Обо мне</a>
							</li>
							<li>
								<a href="#">Блог</a>
							</li>
							<li>
							<a href="#">Контакты</a>
							</li>
						</ul>
					</nav>
			</div>
		</div>

		<div class="container">

			<div class="titles_first">
				Портфолио веб-программиста
			<h1>
				Ерасыла Кудайбергенова
			</h1>
			</div>
		</div>
	</header>

	<section>
		<div class="container">
			
			<div class="title">
				
				<a name="vniz">Обо мне</a>

			</div>

			<div class="aboutme">
				
				Здравствуйте, я веб-программист меня зовут Ерасыл Кудайбергенов, я учусь в колледже "СФЭК" в 3 - м курсе. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus reprehenderit, qui explicabo perferendis, ratione cumque ipsam! Quos optio numquam dolores, corporis natus minima labore, animi, dolore minus, accusamus beatae dolorem quisquam odit possimus reiciendis eius debitis ratione consectetur quae nesciunt ab voluptas? Quaerat explicabo alias laudantium unde, odio adipisci quisquam.

			</div>

		<div class="services">
			<div class="services_item">
				
				<img src="image/icon1.png" alt="Услуга">

				<h3>Разработка сайтов</h3>
				<div class="lorem">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, incidunt.
				</div>

			</div>

			<div class="services_item">
				
				<img src="image/icon2.png" alt="Услуга" height="85px"></img>

				<h3>Графический дизайн</h3>

				<div class="lorem">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, culpa quae recusandae ipsum quibusdam, nulla officia facilis eveniet soluta mollitia. Saepe sequi non doloremque! Quos aperiam, consequatur minima! Cum, debitis veritatis vero eius vitae nesciunt aliquam ipsam molestiae in, tenetur, soluta tempora officiis ipsa similique a minus accusamus at nemo?
				</div>

			</div>

			<div class="services_item">
				
				<img src="image/icon3.png" alt="Услуга" height="90px">

				<h3>Системное администрирование</h3>

				<div class="lorem">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, beatae totam libero, architecto est reprehenderit!
				</div>

			</div>

		</div>
	</section>

	<a href="#" data-target="#el">Обратно наверх :)</a>

	<script type="text/javascript">
	$('a').on('click', function(){
  	var target = $(this).data('target');
  	var pos = $(target).offset().button;
  	$('html, body').animate({'scrollButton': pos -200}, -500);
	});
	</script>
</body>
</html>

body {
	padding: 0;
	margin: 0;

}

div {
	box-sizing: border-box;
}

header {
	background: url(../image/lowpoly.png) no-repeat center top / cover;
	height: 800px;
}

.container {
	width: 900px;
	margin: 0 auto;
}

.logo {
	margin-top: 41px;	
	float: left;
}

nav {
	float: right;
	margin-top: 60px;
}

.menu {
	padding: 0;
	margin: 0;
	display: block;
}

.menu li {
	float: left;
	display: block;
	margin-right: 41px;
}

.menu li a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
}

.clearfix:after {
	content: '';
	display: table;
	width: 100%;
	clear: both;
}

.titles_first {
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	margin-top: 185px;
}

h1 {
	font-size: 38px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}

.title {

	font-size: 35px;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	margin-top: 75px;

}

.aboutme {

	font-size: 15px;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	text-align: left;
	margin-top: 50px;
	line-height: 35px;

}

.services {

}

.services_item {
	width: 270px;
	float: left;
	text-align: center;
	margin-top: 150px;
}

h3 {

	font-family: 'Montserrat', sans-serif;

}

.lorem {
	font-family: 'Montserrat', sans-serif;
}

a {
	text-decoration: none;
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: #102D86;
}

В итоге выходит так, то есть слово "Обратно на вверх должно быть в самом низу но она выше section'a