0

I'm having a little problem with CSS. I'm trying to make a page responsive with @media tags, but IDK why I get a problem I can't manage to fix.

There's like a space between flexbox and the left margin of the page.

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

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

body {
    width: 100vw;
    height: auto;
}

#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;
}

.flexitem {
    width: 50%;
    justify-content: space-between;
    align-items: center;
}

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

.caption {
    color: white;
    text-align: center;
    font-size: 2vh;
    background-color: rgb(169, 169, 169, 0.7);

}

@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;
    }
}
<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</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, figlio delle vite meno agiate, cugino dell’ineluttabile tempo.
                    Se invece hai accolto l’oscurità… Benvenuto su Shido.
                </p>
            </div>
            <div class="flexitem">
                <p class="textflex">Registrati</p>
            </div>
        </div>
    </div>
</body>

</html>

IDK what to add to my explanation, I hope it's clear lol

i'll add some characters to let the system to post it

LORENZO ALINOVI
  • 13
  • 3

1 Answers1

0

Its hard to tell from the image you posted but it looks like you're just encountering the standard margin around the <body> tag.

Depending on your project you might want to read up on the concept of a css reset - this is a utility stylesheet that you can include to iron out some of these types of quirks. Here's an article from CSS Tricks discussing a modern approach to this which you may find interesting: https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/

To fix your immediate problem, try altering your css like so:

body {
  width: 100vw;
  height: auto;
  margin:0;
}
omid
  • 1,146
  • 1
  • 7
  • 17