Mobile website looks great in chromes "developer tools" but is broken when I open the webpage

Question

I am very new to web design and am facing a frustrating issue. I created a mobile website and everything opens properly/looks great in all sizes on chrome developer tools. But when I open the website on any mobile device it is completely different, and the body is off-center and cut off on the left side of the screen (instead of being centered).

I am using

<meta name="viewport" content="width=device-width, initial-scale=1.0">

thinking my problem lies here. Maybe it's throwing off my display: flex property?

This may also have something to do with it:

.container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.home-main {
    width: 100%;
    position: absolute;
    top: 8vmin;
    display: flex;
    justify-content: center;
}

Is there some way for me to troubleshoot my problem on mobile to try and better pinpoint what is going wrong?

Answer 1

In dev tools there is a mobile phone / tablet icon on the top bar. Clicking on this allows you to test different phone sizes by dragging or selecting a device. It is most likely not

<meta name="viewport" content="width=device-width, initial-scale=1.0">

because I use this in all my projects and it doesn't cause this issue

Answer 2

All browsers handle css differently. Ever heard of CSS browser prefixes? Autoprefixer CSS online may can help you. For your code like this:

.container {
    width: 100vw;
    height: 100vh;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.home-main {
    width: 100%;
    position: absolute;
    top: 8vmin;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}