Mobile sized windows still creates a "margin" around a div

Issue

When I try to use my app html page on mobile, there is an additional immutable "margin" that seems to appear on the left and right side of my div. Here is my code:

body {
    overflow: hidden;
    display: flex;
    justify-content: center;
        margin:0;
        padding: 0;
}

#content{
    display: block;
    width:600px;
    height: 910px;
    aspect-ratio: 1.51;
    border:1px solid white;
    margin:0;
    padding:0;
}

I have tried multiple versions of this code to try to remove this extra margin (using @media-content, max/min width and heights, display flex/block/inline-block etc.), but nothing seems to be working. I've been hitting my head against the wall for hours on end, and I know the behavior I'm trying to get is simple:

1. The the "content" box should always maintain the height/width ratio of 1.51.
2. If the window width is small enough, then the whole div should shrink so that the width fills 100% of the screen width (maintaining the aspect ratio).
3. If the window height is small enough, then the entire div should shrink so that the height fills 100% of the screen height (maintaining the aspect ratio).

Solution

The solution was related to how to justify the content. I was unaware of this key line:

justify-content: safe center;

Answered By - Marcell