Flex not respecting margin-CodePudding

I'm trying to add margins to a flex but it's working only for a side.

Margin stuck to the side of the page:

@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 >
        <div >
            <div >
                <p >Underworld</p>
                <p >
                    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>

CodePudding user response：

The problem is you have position: fixed on your .content element. This is taking it out of the document flow.

To fix the issue set the .content to left: 0

.content {
    position: fixed;
    width: 100%;
    left: 0px;
}

Then on the .flex element you just need to do display: flex and remove the other width and alignment properties and then on the .flex-item you can amend the left and right margins as you wish