If I load a component.html in the empty app.html, they are overlapping in a weird way

Question

I want to create a Website, where you have different sites, wich have different backgrounds. But if I render a component.html, it gets loaded in the app.html and it is like a html in another html.

You can see it also because of the two scrollingbar

How is it possible to just render the component.html if I routed to this one? I just have this problem if I route the site and if I have in the app.html

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { IndexComponent } from './index/index.component';
import { EngineeringComponent } from './engineering/engineering.component';

@NgModule({
  declarations: [
    AppComponent,
    NotfoundComponent,
    EngineeringComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot([
      {
        path: 'engineering',
        component: EngineeringComponent
      }, {
        path: 'index',
        component: IndexComponent
      }, {
        path: '**',
        component: NotfoundComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular';
}

css of the html that should be displayed

#body {
  background-image:
    url("https://i.pinimg.com/originals/e5/aa/b4/e5aab4e49c9ac29532e4b187e4059ae3.jpg") ;
  background-repeat: no-repeat;
  height: 100vh;
}

#container {
  width: 1000px;
  height: auto;
  margin-top: 200px;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: auto;
  background: #FFF;
  opacity: 0.65;
}

#text {
  font-family: "Courier New", Courier, monospace;
  font-size: 80px;
  text-align: center;
  color: black;
}

section {
  height: 100vh;
  width: 100%;
  display: table;

}
section.ok{
  background-color: rgb(255, 0, 0);
}

p{
  color: black;
  font-family: arial;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: "Courier New", Courier, monospace;
  font-size: 80px;
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

component.html

<div id="body" style="overflow-y:auto;scroll-behavior: smooth;" #scroll>
  <section>
    <div id="container">
      <div id="text" (click)="hiHo()">
        {{placeholder[i]}}
      </div>
    </div>
    <a href="#" class="scroll-down" style="color:black" (click)="scrollDown()"></a>
  </section>
  <section class="ok">
    <p>
      <a style="color:black" href="http://quotes.yourdictionary.com/articles/funny-fortune-cookie-sayings.html">Source</a>
      <br>
      <a>Music </a>
      <i style="font-size: 50px" (click)=playAudio() class="btn glyphicon glyphicon-play-circle"></i>
      <i style="font-size: 50px" (click)=stopAudio() class="btn glyphicon glyphicon-pause"></i>
    </p>
  </section>
  <section>
    <div id="container">
    </div>
  </section>
</div>

Answer 1

It looks like your routing is correct. However I always use something to set the default component. like this inside my RouterModule.forRoot([]) at the top:

{ path: '', redirectTo: 'engineering', pathMatch: 'full' },

Could you provide the code in the stylesheet or make a stackblitz? I think it has something to do with the size of the container and your background being bigger which causes the scroll.