Much of content is outside the body - html

Question

My navigation bar uses position: sticky, but because the body doesn't go further than the video. The other elements are floating, but they somehow won't go in the body.
When I use a wrapper, all the code is in the body, but the navigation bar isn't sticky any more. I tried overflow auto and all but it doesn't work. Here is my code:
body {
background-image: url(bf1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
font-family: roboto, sans-serif;
}
header img {
margin: auto;
width: 30vw;
height: 10vh;
display: block;
}
header {
margin: 0;
clear: both;
}
nav {
width: 100%;
height: 8vh;
background-color: black;
margin: 0;
position: sticky;
top: 0;
clear: both;
}
nav ul {
margin: 0;
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
margin: 2vh 2vw 0px 2vw;
}
nav a {
color: white;
font-size: 1.25em;
text-decoration: none;
}
nav a:hover {
color: #FF5D09;
}
#huidig {
color: #FF5D09;
}
#trailer {
width: 100%;
margin: 1% 0%;
clear: both;
}
#trailer iframe {
width: 50vw;
height: 60vh;
margin: 0 auto;
display: block;
border: solid black 4px;
}
article {
color: white;
height: auto;
width: 70vw;
float: left;
font-size: 110%;
text-align: center;
}
<header> <img src="header.png" /> </header>
<nav>
<ul>
<li><a id="huidig" href="home.html">Home</a></li>
<li>They Shall Not Pass</li>
<li>In the Name of the Tsar</li>
<li>Community</li>
</ul>
</nav>
<div id="trailer">
<iframe src="https://www.youtube.com/embed/zOKZtgsUCtc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<article>
<div id="Intro">
<h2> Introductie</h2>
<p>Battlefield 1 is een first person shooter ontwikkeld door EA DICE. Ondanks de 1 is het de 15e game in de series. In tegenstelling tot de voorganger speelt Battlefield 1 zich af in de 1e wereldoorlog. Wat Battlefield 1 (eigenlijk de hele Serie) nou
bijzonder maakt, in vergelijking met de competitie, is het feit dat het voertuigen bevat die spelers zelf kunnen besturen. Verder bevat het spel veel grotere maps dan de concurrenten.
</p>
</div>
<img src="pic1home.jpg" />
<div id="Singleplayer">
<h2>Singleplayer</h2>
<p>Voor Battlefield 1 heeft de developer gekozen voor een andere soort storyline dan ze altijd hebben gedaan. In de vorige titels waren het altijd opeenvolgende missies die je moest doen. Het perspectief was altijd vanuit één persoon en het was een tradionele
singleplayer, zoals de andere shooters. Bij Battlefield 1 hebben ze nu war stories. In plaats van een reeks missies, speel je nu als het ware meerdere kleine singleplayers. Je kunt het zien als hoofstukken, elk hoofstuk heeft een paar missies die
het verhaal van de hoofdpersonage vertellen. Je speelt daardoor ook niet als één persoon, maar als meerdere tijdens de eerste wereldoorlog.
</p>
<table>
<tr>
<th>War Story</th>
<th>Hoofdpersonage</th>
<th>Thema</th>
</tr>
<tr>
<td>Through Mud and Blood</td>
<td>Daniel Edwards</td>
<td>Mark V tank</td>
</tr>
<tr>
<td>Friends in high places</td>
<td>Clyde Blackburn</td>
<td>Luchtgevechten </td>
</tr>
<tr>
<td>Avanti Savoia</td>
<td>Luca Vincenzo</td>
<td>zoektocht</td>
</tr>
<tr>
<td>The Runner</td>
<td>Frederick Bishop</td>
<td>vriendschap <br/>opoffering </td>
</tr>
<tr>
<td>Nothing is Written</td>
<td>Zara Ghufran</td>
<td>Pantsertrein <br/> vrijheid</td>
</tr>
</table>
</div>
<div id="multiplayer">
<h2>Multiplayer</h2>
<p>De multiplayer van Battlefield 1 is voor veel mensen de reden om het spel te kopen. Het bevat voertuigen zoals tanks, vliegtuigen en boten en gedetailleerde omgevingen. Elk voertuig heeft 3 variaties die je kunt kopen. Elke variate geeft het voertuig
andere wapens, zodat het meer anti-tank focussed is of juist goed for infanterie. Een nieuw gameplay element in Battlefield 1 is de behemoth. Als een team dreigth te verliezen met een groot verschil krijgt het toegang tot een speciaal voertuig om
een comeback te maken. Het voertuig verschilt per map en kan een armored train zijn, maar ook een enorme zeppelin.</p>
</div>
</article>
<div id="sidenav">
<ul>
<li>Introductie</li>
<li>singleplayer</li>
</ul>
</div>

Answer 1

oh i made the most stupidest question. sorry for wasting your time guys. i appreciate your will to help. the problem was that the body collapsed, i made a test footer with clear:both and it fixed the problem. sorry again for posting something this stupid.