Div won't center for mobile devices

Question

My div contained in another div won't center on mobile devices. I tried using a max-width media query and nothing's happening with it.

Here's the HTML code (the div I'm trying to center has the id portrait):

<div id="ABOUT-ME">
            <p class="mono" id="aboutme">.about-me</p>
            <div class="about-me-box">
                <div id="portrait"></div>
                <p class="main-text" id="_1">-</p>
                <br>

                <p class="main-text" id="_2">- 
                </p>
            </div>
        </div>

And here's the CSS code:

#ABOUT-ME {
    top:650px;
    height:350px;
    z-index:4;
    width:70%;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.about-me-box {
    position:absolute;
    top:110px;
    z-index:4;
    width:100%;
    white-space: nowrap;
    margin:auto;
    height:450px;
    overflow:auto;
    left:50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    border:1px solid rgba(255, 255, 255, 0.15);
}
#aboutme {
    display:flex;
    color:#000;
    position:absolute;
    background-image: linear-gradient(90deg, #FFE600, #00fbff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:50px;
    top:0px;
}
#portrait {
    width:200px;
    height:300px;
    display:inline-block; 
    margin:60px;
    right:50px;
    background-color:#000;
    float:right;
}
@media (max-width: 1020px) {
    #potrait {
        margin:0 auto;
    }
    .about-me-box {
        height:850px;
    }
    #_1 {
        width:80%;
        margin-top:70px;
        /* top:40px; */
    }
    #_2 {
        width:80%;
        /* top:140px; */
    }
}

Answer 1

Simply you missed the r in #potrait

#potrait -> #portrait