SpaceQuestion

What causes this whitespace?

HTML

<!DOCTYPE html>
<html>
<head>

<style>

/*--------------------------------------------------------------
# Debug
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

	body {
		margin: 0px;
		padding: 0px;

		font-family: Share, arial, sans-serif;

		text-align: center;
	}

	h1 {
		font-size: 2em;
		padding: 0.67em 0;
	}

	span.clear { clear: left; display: block; }

	/* Target div ONLY if direct child of body 
		This is for the main sections which alternate dark and light */
	body > div {
		display: block;
		width: 100%;
		padding: 0px;
		margin: 0px;
	}

	.inner {
		padding: 10px;
	}

	/* Colors for main sections */
	.dark {
		color: rgb(169,169,169);
		background-color: rgb(51,51,51);
	}

	.light {
		color: rgb(0,0,0);
		background-color: rgb(255,255,255);
	}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

	.header {
		display: inline-block;
		
		font-size: 25px;
		font-weight: 400;
		letter-spacing: 0.091em;
	}

	.headerlink{
		/* necessary for two-div arrangement */
		float:left;
	}

	.headernavs{
		float: right;
		padding: 0px 0px 0px 10px;
	}

	/* necessary for two-div arrangement 
	.headernavs{
		
		float:none;
		overflow: hidden;

		display: flex;
		flex-grow: 1;
		justify-content: space-around;
	}
	*/

	.header a:link, a:visited {
		text-decoration: none;
		color: #FFF;
	}

	.header a:hover, a:active {
		text-decoration: none;
		color: #AAA;
	}

	.header img {
		display: inline-block;

		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

	#hero.hero {

		background-image: url('../../assets/img/hero.png');
		background-size: cover;
		background-position:...