nao consigo centralizar

@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, .logo, .formulario-tabela {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
        width: auto;
        margin: 0 0 0 0px;
    }

    ul {
        width: calc(100% - 10px);
        margin-inline: auto;
    }

width: calc e margin-inline nao influenciam.

o codigo abaixo é como ele esta fora do @media screen

.caixa {
    position:  relative;
    width: 940px;
    margin: 0 auto;

}

nav {
    position:  absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin:  0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color:  #000000;
    font-weight: bold;
    font-size:  20px;
    text-decoration: none;
    text-shadow: 2px 2px #808080;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
    transition: 400ms;
}