my webpage has all of this extra white spacing after my content. If you would paste my code into your IDE and look that would be great! I have tried a few things like make a div around the whole content of the page and set some padding and margin on the bottom but I just can't get it!

```
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <title>Halong Bay</title>
</head>
<body>

    <nav class="navbar">
            <ul>
                <li><a href="index-bay.html">Home</a></li>      
                <li><a href="about.html">About</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="map.html">Map</a></li>
                <li><a href="tables.html">Table</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    <section class="intro">
        <div class="inner">
            <div class="content">
                <h1>About Halong Bay</h1>
                <a class="btn" href="#link"> get started </a>
                <a class="btn" href="index-bay.html"> Back to Home </a>
            </div>
        </div>
    </section>
    <article>
    <h1>Halong Bay</h1>
    <p id="link"> 
        Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
    </p>
    </article>
    <div id="history">
    <h1>History of Ha Long Bay</h1>
    <p>
        For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
    </p>
    </div>

</body>
</html>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

}

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
    background-size: cover;
    display: table;
}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.content h1 {
    font-family: 'Raleway';
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

.btn {
    border-radius: 9px;
    font-family: 'Raleway';
    color: white;
    font-size: 135%;
    padding: 10px 20px;
    border: solid #036AB1;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 20px;
    font-weight: bold;
}

.btn:hover {
    color: #fff;
    border: solid #fff 3px;
}

p {
    font-size: 160%;
    line-height: 200%;
    margin: 3%;
    font-family: 'Raleway';
    padding: 200px;
}

nav ul li {
    position: relative;
    color: red;
    font-size: 24px;
    display: inline-block;
    text-align: right;
    margin-right: 40px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Raleway';
    font-weight: 900;

}

nav ul li a {
    color: black;
    text-decoration: none;

}

nav ul li a:hover {
    color: blue;

}

.navbar {
    color: black;
    text-align: center;

}

a.btn {
    font-weight: 950;
}

#link {
    position: relative;
    bottom: 100px;

}

p:first-letter {
    font-size: 200%;
}

article {
    padding: 50px;
}

#top1 {

    font-size: 30px;
    text-align: center;

}

article h1 {
    font-size: 40px;
    text-align: center;
}

#history h1 {
    font-size: 50px;
    text-align: center;
    position: relative;
    bottom: 300px;
}

#history p {
    position: relative;
    bottom: 500px;
}

```