Popover postion not correct when center IonApp

I am building an app that can run on mobile and web. In the web version. I want to limit its width and make it in the centre. here is what I do

.custom-mx-auto {
    margin-left: auto;
    margin-right: auto;
.custom-max-w-3xl {
    max-width: 48rem/* 768px */;

    <IonApp className='mx-auto custom-max-w-3xl'>

however, I have an issue is that when the screen width becomes larger, the popover position is not right. This only happens when the screen width becomes in large

after investigation, it turns out that margin-left: auto; and margin-right: auto; will influence how popover determines position.

I wonder if is there a solution to keep Ionapp in the centre. and when the screen becomes smaller, it will turn into a one-column app.

I tried to use grid. but hard to apply it with IonSplitPane when the screen becomes smaller, it just compresses the content rather than keeps the content’s width.

Docs, provide how to position.

I tried using difference compositions of reference, side, etc. Not working. It seems that the CSS of IonApp will not affect popover, because popover is on the top of IonApp.