how to remove black space on my wordpress 2016 - css

Question

I am having problems reducing and/or removing the black space at the bottom of my wordpress webpage. Using inspector the black space seems to go over 2 css divs.
I need to add code in the custom css area to solve this but I dont know what to add.
http://andrewt.com.au/wp1/
this is the footer.php code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
?>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</footer><!-- .site-footer -->
</div><!-- .site-inner -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>

Answer 1

Add this code in your footer.php
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
?>
<style>
#media screen and (min-width: 61.5625em){
.content-area .site-main {
margin-bottom: 0px;
}
}
</style>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</footer><!-- .site-footer -->
</div><!-- .site-inner -->

Answer 2

Your website is broken, or have very-very-very bad coded.
Add this css rules to custom css area( as you mentioned ):
#main{
margin-bottom: 10px;
}
footer{
padding: 5px; //or you can decrease/increase it
}
If after adding and refreshing/deleting cache of page, it doesn't affected, than try to use:
#main{
margin-bottom: 10px !important;
}
footer{
padding: 5px !important; //or you can decrease/increase it
}
or try to write the rules provided to some other stylesheet, such as default customizer of wordpress: Customize => Additional Css.