Ненужный пробел справа и снизу в приложении Angular

Question

Я довольно новичок в веб-разработке, так что, может быть, это глупый вопрос, но мне здесь очень нужна помощь. Я создал свое первое приложение angular, и на целевой странице, кажется, много пустого пространства справа, а также внизу после нижнего колонтитула, когда вы находитесь в мобильном режиме. Я попытался сделать компоненты полной ширины точки обзора, но затем анимация страницы искажается, и независимо от того, что я делаю, пространство после нижнего колонтитула все еще остается. Вы можете проверить мой репозиторий Github здесь . Ниже я прилагаю скриншот, а также код компонента нижнего колонтитула:

нижний колонтитул. 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>

нижний колонтитул. 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;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right;   background: #7f7f7f;}

.typo-light h1, .typo-light h2, .typo-light h3, .typo-light h4, .typo-light h5, .typo-light h5,.typo-light p,.typo-light div,.typo-light span,.typo-light small{    color: #fff;}
.footer-top {
  margin-top: .5em;}
ul.social-footer2 { margin: 0;padding: 0;   width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
/* ul.social-footer2 li a:hover {background-color:#de6b28;} */
ul.social-footer2 li a {display: block; height:30px;width: 30px;text-align: center; z-index: 2;}
.btn{background-color: #de6b28; color:#fff; z-index: 2;}
.btn:hover, .btn:focus, .btn.active {background: #233B66;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;}

/* Animations */
.area{
    background: #252525;  
    background: -webkit-linear-gradient(to left, #de6b28, #de6b28);  
    width: 100%;
    position: relative;

}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events:none;
    user-select: none;
    z-index:1}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #de6b28;
    animation: animate 25s linear infinite;
    bottom: -150px;

}
.circles li:nth-child(10){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(9){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(8){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(7){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(6){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(5){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(4){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(3){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(2){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;}
.circles li:nth-child(1){left: 85%;width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;}
@keyframes animate {
0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;}}

Answer 1

Я клонировал ваш репозиторий и обнаружил, что элемент ul с идентификатором circles вызывает проблему с пробелами.

Просто добавьте margin: 0 к этому элементу, и пробел должен исчезают.