<ion-router-outlet> and <ion-header> overlap

I have two nested ion routers.The reason why I use two router outlets is that all the pages except the login page have a side menu and a header in my application

app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

app.routing.module.ts

...
{
    path: 'login',
    loadChildren: () =>
      import('./pages/login/login.module').then((m) => m.LoginPageModule),
    canActivate: [IsLoggedGuard],
  },
  {
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then((m) => m.HomePageModule),
    canActivate: [AuthGuard]
  },
...

home.routing.module.ts

...
const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children: [
      {
        path: 'listall',
        component: ListAllComponent,
      },
      {
        path: 'create',
        component: CreateComponent,
      },
    ],
  },
];
...

home.page.html

<ion-menu>
...
</ion-menu>
<ion-header [translucent]="true" mode="ios">
  <ion-toolbar>
    <ion-menu-button slot="start" mode="md"></ion-menu-button>
  </ion-toolbar>
</ion-header>
<ion-router-outlet id="main"></ion-router-outlet>

The problem is that the header overlaps the component that comes with the router outlet. So if I don't add margin-top to the called component I can't see the above content. I think this is not the right solution, I am doing something wrong. Where am I doing wrong? image