Flex not respecting margin

@import url('https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap');

* {
    font-family: 'Luxurious Roman', cursive;
}

body {
    margin: 0 0.5em 0 0.5em;
}

#background-video {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
}

.content {
    position: fixed;
    width: 100vw;
}

#detach-button-host {
    display: none;
}

.flex {
    display: flex;
    flex-direction: row;
    width: 100vw;
    align-content: space-between;
    justify-content: space-between;
}

.flexitem {
    width: 50%;
    justify-content: space-between;
    align-items: center;
    margin: 0 5px 0 5px;
    max-height: inherit;
}

.textflex {
    text-align: center;
    color: white;
    font-size: 5vh;
}

.caption {
    color: white;
    text-align: center;
    font-size: 2vh;
    background-color: rgba(40, 57, 101, .9);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}

@media only screen and (max-width: 600px) {
    .flex {
        display: flex;
        flex-direction: column;
        width: 100vw;
        align-items: center;
    }

    .flexitem {
        width: 100vw;
        justify-content: center;
        align-items: center;
        padding: 0 5px 0 5px;
        margin: 0 5px 0 5px;
    }

}

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underworld</title>
    <link rel=stylesheet href="style.css">
</head>

<body>
    <video autoplay muted loop id="background-video">
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="content">
        <div class="flex">
            <div class="flexitem">
                <p class="textflex">Underworld</p>
                <p class="caption">
                    Un celere stridio, un battito, un fendente, un… caduto.
                    La grande Luna divenuta specchio del putrido miasma terreno, brinda con angoscia alla morte e alla sventura.
                    Quei due leggendari ed eterni guerrieri scrutano ivi la natura delle loro scelte, ansimanti e sospiranti del mai nuovo avvenire.
                    L’immensa Shido, fragile e disastrosa terra delle mancate promesse, osserva ora con affronto tutti coloro che osano macchiare, col sangue, le sue scure e marce praterie.
                    Viandante, una forza invisibile ti intima di allontanarti, ti ordina di fuggire via se le tue iridi mai sono state lambite dall’artiglio dell’orrida verità. Lascia questi lidi se mai i tuoi occhi sono stati scossi dalla veemenza della marcescenza, figlia delle vite meno agiate, cugina dell’ineluttabile tempo.
                    Se invece hai accolto l’oscurità… Benvenuto su Shido.
                </p>
            </div>
        </div>
    </div>
</body>

</html>