I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom after the footer when viewed on a mobile device. I've tried adjusting the components to take up the full viewport width, but it's causing distortion in the animation of the page. No matter what I try, the space after the footer remains. You can view my project on GitHub here. Below, I've included a screenshot and the code for my footer component: https://i.sstatic.net/Z9Zin.png
footer.html:
<footer id="footer" class="footer-1 area">
<div class="main-footer widgets-dark typo-light">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="widget subscribe no-box">
<h5 class="widget-title"><img src="assets/images/logo.png" width="50" height="40" alt="LOGO" >WEBBNET DIGITAL<span></span></h5>
<p>KOLKATA - 700064</p>
</div></div>
<div class="col-xs-12 col-sm-6 col-md-4 footer-top">
<div class="widget no-box">
<h5 class="widget-title">Get Started<span></span></h5>
<p>SEND IN A QUERY</p>
<a class="btn" #myModal (click)="openModal()">Register Now</a>
</div></div>
<div class="col-xs-12 col-sm-6 col-md-4 footer-top">
<div class="widget no-box">
<h5 class="widget-title">Contact Us<span></span></h5>
<p><a href="mailto:" title="glorythemes">support</a></p>
<ul class="social-footer2">
<li class=""><a href="https://www.facebook.com/webbnetdigital/" target="_blank" title="Facebook"><img alt="Facebook" width="30" height="30" src="data:image/png;base64></a></li>
<li class=""><a href="https://twitter.com" target="_blank" title="Twitter"><img alt="Twitter" width="30" height="30" src="data:image/png></a></li>
<li class=""><a title="instagram" target="_blank" href="https://www.instagram.com/webbnetdigital/"><img alt="instagram" width="30" height="30" src="data:image/png;></a></li>
<li class=""><a title="linkedin" target="_blank" href="https://www.linkedin.com/company/webbnet-digital/"><img alt="linkedin" width="30" height="30" src="data:image/png;base64></a></li></ul></div></div></div></div></div><div class="footer-copyright"><div class="container"><div class="row"><div class="col-md-12 text-center">
<p>Copyright</p></div></div></div></div>
<ul class="circles">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></footer>
footer.css:
/* Main Footer */
footer .main-footer{ padding: 20px 0; z-index: 1;}
footer ul{ padding-left: 0; list-style: none;}
/* Copy Right Footer */
.footer-copyright { background: #222; padding: 5px 0;}
.footer-copyright .logo { display: inherit;}
.footer-copyright nav { float: right; margin-top: 5px;}
.footer-copyright nav ul { list-style: none; margin: 0; padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block; line-height: 12px; margin: 0; padding: 0 8px;}
.footer-copyright nav ul li a{ color: #969696;}
.footer-copyright nav ul li:first-child { border: medium none; padding-left: 0;}
.footer-copyright p { color: #969696; margin: 2px 0 0;}
/* Footer Top */
.footer-top{ padding-bottom: 30px; margin-bottom: 30px; border-bottom: 3px solid #222;}
/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{ background: transparent;}
footer.transparent .footer-copyright{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}
/* Footer light */
footer.light .footer-top{ background: #f9f9f9;}
footer.light .main-footer{ background: #f9f9f9;}
footer.light .footer-copyright{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}
/* Footer 4 */
.footer- .logo { display: inline-block;}
/*====================
Widgets
====================== */
.widget{ padding: 20px; margin-bottom: 40px;}
.widget.widget-last{ margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent; margin-bottom: 40px;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{ margin-bottom: 18px;}
.widget li a{ color: #de6b28;}
.widget li a:hover{ color: #233B66;}
... (omitting rest of CSS)