Spacing or Padding between header and <ion-router-outlet>

Quick question here guys, I cant seem to figure this out. I have a nested router inside of a component. My main routes are contained in my App.tsx file as shown here.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/events">
            <Tab1 />
          </Route>
          <Route path="/preferences">
            <Preferences />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/events" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/events">
            <IonIcon icon={calendar} />
            <IonLabel>Events</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/preferences">
            <IonIcon icon={reader} />
            <IonLabel>Preferences</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={cog} />
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

Inside of this I have a Preferences.tsx component. In this component I have another nested router setup. Routing works fine, its just the content that’s loaded in my router when rendered, is overlapped by my IonHeader thats in my preferences.tsx component. Heres the code, and an image of what it looks like. Any suggestions?

Preferences.tsx

<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Preferences</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen className="ion-padding">
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Preferences</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRouterOutlet>
          <Route exact path='/preferences/preference-list'>
            <PreferenceList/>
          </Route>
          <Route path='/preferences/preference-slides'>
            <PreferenceSlides/>
          </Route>
          <Route exact path="/preferences">
            <Redirect to="/preferences/preference-list" />
          </Route>
        </IonRouterOutlet>
      </IonContent>
    </IonPage>

and here is an image of what the rendering looks like

In Preferences.tsx, I would render an IonPage for each individual route:

<IonPage>
        <IonRouterOutlet>
          <Route exact path='/preferences/preference-list'>
            <IonPage>
              <PreferenceList/>
             </IonPage>
          </Route>
          <Route path='/preferences/preference-slides'>
            <IonPage>
              <PreferenceSlides/>
             </IonPage>
          </Route>
          <Route exact path="/preferences">
            <Redirect to="/preferences/preference-list" />
          </Route>
        </IonRouterOutlet>
</IonPage>

I am guessing that sharing the header among multiple pages is breaking things; even if the header text is the same, I would add it separately to each .