Angular problem with nested routing, displaying child component above parent component

In my application, I have implemented nested routing. The /offers endpoint displays all offers, while /offers/{id} displays a specific offer. I know that the parent must have a router-outlet, but the problem is that instead of displaying a specific offer on a separate page, it displays that offer above the list of all offers. The URL in the browser is correct; it just displays the offer above the list of offers.

app-routing.module

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { 
    path: 'offers', 
    component: OffersComponent, 
    canActivate: [authGuard],
    children: [
      { 
        path: ':id', 
        component: OfferDetailComponent, 
        canActivate: [authGuard]
       }
    ] 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<div class="app-header">
  <app-header></app-header>
</div>
<div class="app">
  <router-outlet></router-outlet>
</div>

offers.component.html

<router-outlet></router-outlet>

<section class="section">
    <div class="offers-container">
        <h1>All offers</h1>
        <a *ngFor="let offer of offers" routerLink="/offers/{{offer.id}}" class="offer-card">
            <h2>{{ offer.position }}</h2>
            <p>{{ offer.location }}</p>
        </a>
    </div>
</section>

Is there a way to prevent the selected offer from being displayed above the list of offers and instead show it on a separate page?