newbie Flexbox Responsiveness alignment issues

Question

I'm trying to make my neocities using a premade flexbox layout for the first time.

In mobile devices, the boxes are slightly aligned to left, making the browser to zoom in to center the content somehow.

What could I be doing wrong in the CSS or html?

I am using ChatGPT to write and adapt the layout for me, e.g. write a tile background for me. change some inline html styling to CSS, organize my code with comments, make my music player work as a fixed footer, align some text, make the actual footer to be transparent while its text has a dark transparent background covering the textbox, write a JavaScript for an animated "under construction" text, organize all the stuff in my CSS, and so on and so on.

I've been doing this by copy/pasting my index.html and style.css code and asking for it to analyze the codes.

the layout is almost the way I want it, but, somehow, in mobile screens, the Flexbox layout is ALWAYS slightly aligned to left. the browser makes a tiny zoom in so it can fix it somehow, I think.

O've tried a lot of suggestions from ChatGPT, and all of them made my flexboxes do be drastically re-dimensioned, such in desktop as in mobile views.

I've come to a point where ChatGPT simply can't solve my problem, I must ask for help while I try to learn about responsiveness and more in-depth CSS syntax and practices.

I know, might be ridiculous for some, but my goal is to make a cool place for me to share my work, thoughts and researches. I'm encouraging myself to engage in coding in this process, which is being really good for me as a whole.

what could be wrong in my code?

here are the codes for my index and style, respectively:

 function typeWriter(text, i, span) {
    if (i < text.length) {
      span.innerHTML += text.charAt(i);
      i++;
      // Move o cursor para o final do texto
      span.innerHTML = text.substring(0, i);
      // Define o cursor para ficar sempre visível
      span.scrollTop = span.scrollHeight;
      setTimeout(function() { 
        typeWriter(text, i, span); 
      }, 100); // Ajuste o valor 100 para controlar a velocidade da digitação
    } else {
      // Adiciona o cursor piscando após o texto completo ser digitado
      span.innerHTML += "<span id='cursor'>|</span>";
      setInterval(function() {
        var cursor = document.getElementById('cursor');
        cursor.style.visibility = (cursor.style.visibility == 'visible') ? 'hidden' : 'visible';
      }, 500); // Ajuste o intervalo de piscagem conforme desejado (por exemplo, 500ms)
    }
  }

  // Chamada da função de animação ao carregar a página
  window.onload = function() {
    var text = "Site ainda em construção...";
    var span = document.getElementById("construction-text");
    typeWriter(text, 0, span);
  };

html {
  /* Set some global colors here for quick re-coloring of stuff! */
  --bg-color: rgba(0, 0, 0, 0);
  --darker-color: black;
  --lighter-color: black;
  --accent-color: white;
  --sidebar-width: 140px;
  background-color: var(--bg-color);
  background-image: url(RUBIX%20LAYOUT/stars5.gif); /* add image url for tiled background */
  width: 100%;
  min-height: 100vh;
  position: relative;
}

@font-face {
  font-family: 'NeueHaasDisplay-RomanItalic';
  src: url('RUBIX%20LAYOUT/FONTS/NeueHaasDisplay-RomanItalic.woff') format('woff');
  font-style: italic; /* Defina o estilo da fonte como itálico */
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'NeueHaasDisplay-RomanItalic', sans-serif; /* Use a fonte itálica definida ou uma fonte alternativa caso a primeira não esteja disponível */
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  color: var(--darker-color);
  background-color: var(--lighter-color);
}

body {
  margin: 0%; /* Margem de 2% em todos os lados do corpo do site */
  padding: 0; /* Remove o preenchimento padrão do corpo */
  background-color: var(--bg-color);
  background-image: url(stars5.gif); /* Adiciona a imagem de fundo */
  width: 100%; /* Largura do corpo é 96% da largura da tela após subtrair as margens */
  min-height: 100vh;
  position: relative;
}


ol,
ul {
  list-style: none;
  list-style-type: square;
}

h1 {
  width: calc(100% - 20px);
  font-size: 3em;
  font-weight: bold;
  padding: 25px 10px 10px;
  text-align: center; /* Alinhar o cabeçalho ao centro */
}

h1 img {
  width: 100%;
  max-width: 720px;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  padding: 10px 8px 10px;
}

.boxgallery {
  margin: auto;
  padding: 15px 30px 15px;
  max-width: 100%;
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  justify-content: center;
  background-color: var(--bg-color);
}

.box {
  display: block;
  position: relative;
  min-width: 400px;
  max-width: 400px;
  min-height: 300px;
  margin: 5px;
  flex-grow: 1;
  background-color: var(--accent-color);
  background-position: center;
  background-size: cover;
  border: 4px solid var(--accent-color);
}

.boxHover {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 15px 0px 30px;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}

.boxHover:hover {
  opacity: 1;
  background: grey;
  background: rgba(0, 0, 0, 0);
  transition: opacity 0.6s;
}

.boxHover {
  position: relative;
  padding: 15px 0px 30px;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  opacity: 1; /* Alterando a opacidade para 1 para manter o texto sempre visível */
}

/* Adicione esta seção ao seu CSS existente */
.boxHover a {
  text-decoration: none; /* Remover o sublinhado */
}

.boxHover h3 {
  color: black; /* Definir a cor do texto para preto */
}

.box a, .box p {
  color: black; /* Definir a cor do texto para preto */
}


.boxHover h3 {
  color: black; /* Definir a cor do texto para preto */
  font-size: 20px; /* Definir o tamanho da fonte conforme necessário */
  text-align: center; /* Centralizar o texto dentro da box */
}

.box a,
.box p {
  display: inline-block;
  width: 90%;
  margin: auto;
  color: black; /* Defina a cor do texto como preto */
  font-size: 130%;
  opacity: 1; /* Mantendo a opacidade do texto em 1 */
  text-decoration: none; /* Remover sublinhado */
}

@media screen and (max-width: 768px) {
  .boxgallery {
    margin: 0 5vw; /* Adiciona uma margem lateral de 5% à flexbox */
  }

  .box {
    width: 90vw; /* Redimensiona a largura para 90% da largura da viewport */
    max-width: none; /* Remove a largura máxima para permitir a flexibilidade */
    margin: 2vw auto; /* Centraliza horizontalmente com uma margem de 2% nas laterais */
  }
}



p {
  padding: 10px 12px 10px;
}

/* Estilos para o footer */
footer {
  text-align: center;
  padding: 20px 0; /* Aumentando o padding para espaçamento extra */
  color: white;
  background-color: transparent; /* Fundo transparente para o footer */
}

/* Estilo para o texto H4 */
footer h4 {
  margin: 0; /* Removendo a margem padrão */
}

/* Estilo para a linha de contato */
footer .contact-info {
  margin: 10px 0; /* Adicionando margem para separação */
}

/* Estilo para os links de rodapé */
footer .footer-links {
  display: flex; /* Tornando os links em linha */
  justify-content: center; /* Centralizando horizontalmente */
  align-items: center; /* Alinhando verticalmente */
}

/* Estilos específicos para os links dentro do footer */
footer .footer-links a {
  color: white; /* Cor do texto */
  padding: 0 10px; /* Espaçamento interno */
  margin: 0 5px; /* Margem entre os links */
  text-decoration: underline; /* Sublinhado padrão */
}

/* Estilos específicos para o contêiner do GIF e do link VOLTAR */
.gif-container {
  position: relative; /* Define o posicionamento relativo */
}

.gif-container a.voltar {
  position: absolute; /* Define o posicionamento absoluto */
  bottom: 40%; /* Alinha o link na base do contêiner */
  left: 50%; /* Alinha o link no centro horizontal do contêiner */
  transform: translate(-50%, 50%); /* Move o link -50% horizontalmente e 50% verticalmente */
  font-weight: bold; /* Adiciona negrito ao texto do link */
  background-color: transparent; /* Fundo transparente */
}

/* Estilos para o botão dentro do gif-container */
.gif-container .gif-button {
  background-color: transparent; /* Fundo transparente */
  color: white; /* Cor do texto */
  font-weight: bold; /* Adiciona negrito ao texto */
}

/* Fundo preto levemente transparente apenas para texto e links */
footer h4, footer .contact-info, footer .footer-links a:not(.voltar) {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Regra de mídia query para todo o footer em dispositivos móveis */
@media screen and (max-width: 768px) {
  footer {
    padding: 10px; /* Reduz o padding para dispositivos móveis */
  }
  
  footer h4 {
    font-size: 16px; /* Reduz o tamanho da fonte para dispositivos móveis */
  }

  footer .contact-info {
    font-size: 14px; /* Reduz o tamanho da fonte para dispositivos móveis */
    margin-bottom: 10px; /* Adapta a margem inferior para dispositivos móveis */
  }

  footer .footer-links {
    justify-content: center; /* Centraliza os links horizontalmente */
  }

  footer .footer-links a {
    margin: 0 5px; /* Adapta as margens dos links para dispositivos móveis */
  }
}




/* Regra de mídia query para a flexbox */
@media screen and (max-width: 768px) {
  .boxgallery {
    margin: 0 auto; /* Centraliza a flexbox horizontalmente */
  }
}




/* Define o segundo cursor como o cursor padrão para o corpo da página */
body {
cursor: url(https://cur.cursors-4u.net/mechanics/mec-4/mec317.cur), auto !important;
}

/* Define o primeiro cursor como o cursor para os links */
a {
  cursor: url('https://ani.cursors-4u.net/cursors/cur-11/cur1073.png'), auto !important;
}


/* Outros estilos CSS */

/* Estilos para o container do player do Mixcloud */
#mixcloud-player-container {
  position: fixed; /* Define o posicionamento fixo */
  bottom: 0; /* Alinha o elemento ao fundo da página */
  left: 50%; /* Define o ponto inicial como o centro da página */
  transform: translateX(-50%); /* Move o elemento de volta para a esquerda em 50% de sua própria largura */
  width: calc(100% - 20px); /* Define a largura com margens para preencher toda a largura da página */
  max-width: calc(100% - 40px); /* Define a largura máxima com margens */
  background-color: rgba(0, 0, 0, 0); /* Define a cor de fundo do rodapé */
  padding: 10px; /* Adiciona espaço interno ao rodapé */
  text-align: center; /* Centraliza o conteúdo do rodapé */
  z-index: 9999; /* Garante que o rodapé esteja acima de outros elementos */
}


/* Estilos para o player do Mixcloud */
.mixcloud-player {
  width: 100%; /* Define a largura para preencher todo o container */
  max-width: 100%; /* Define a largura máxima */
}

#construction-text {
  color: yellow;
  height: 1em; /* Defina uma altura fixa para o elemento durante a animação */
  text-align: center;
  font-size: 5vw; /* Tamanho da fonte responsivo em relação à largura da tela */
  font-weight: bold;
  padding: 10px 8px;
  white-space: nowrap; /* Impede a quebra de linha */
  margin: 0; /* Define as margens para 0 para garantir que não haja espaço adicional */
}

.construction-section {
  text-align: center; /* Centraliza o conteúdo horizontalmente */
  height: auto; /* Altura fixa para a construction-section */
  position: relative; /* Define posição relativa para os elementos filhos */
  margin: 0; /* Define as margens para 0 para garantir que não haja espaço adicional */
}

.centered-gif {
  max-width: 100%; /* Define a largura máxima da imagem */
  position: relative; /* Define a posição relativa */
  margin-top: 20px; /* Adiciona um espaço entre o texto e a imagem */
}

@media screen and (min-width: 768px) {
  /* Redefine o tamanho máximo da fonte para telas maiores */
  #construction-text {
    font-size: 2em; /* Define o tamanho máximo da fonte em ems */
    margin-bottom: 0; /* Remove a margem inferior para evitar espaçamento desnecessário */
  }

  /* Adicione outras regras de estilo conforme necessário para ajustar o layout em telas maiores */
}

/* Animação de blinkCursor */
#cursor {
  display: inline-block;
  vertical-align: middle; /* Alinha verticalmente com o texto */
  animation: blinkCursor 0.5s infinite; /* Define a animação de piscar */
}

@keyframes blinkCursor {
  0% {
    opacity: 1; /* Começa visível */
  }
  50% {
    opacity: 0; /* Fica invisível */
  }
  100% {
    opacity: 1; /* Volta a ficar visível */
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>**GERMANI**</title>
  <link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <!-- Imagem do cabeçalho/link para a página inicial -->
  <h1><a href="RUBIX%20LAYOUT/"><img src="bannerzinho.png" alt="dj Germani"></a></h1><!-- Texto em construção -->
  <div class="construction-section">
  <h2 id="construction-text"></h2><img src="digitalends.gif" class="centered-gif" alt="digitalends"></div>
  
  <!-- Outros conteúdos da página -->
  
  <div class="boxgallery">
  
    <a href="RUBIX%20LAYOUT/" style="text-decoration: none;">
    <div class="box">
      <div class="boxHover">
        <h3>SOBRE MIM</h3>
      </div>
      </div></a> 
    
    <a href="RUBIX%20LAYOUT/" style="text-decoration: none;">
    <div class="box" style="background-image:url(28.gif)">
      <div class="boxHover">
        <h3>IMAGENS</h3>
      </div>
      
    </div></a> <a href="RUBIX%20LAYOUT/" style="text-decoration: none;">
    <div class="box" style="background: linear-gradient(white, green);">
      <div class="boxHover">
        <h3>BLOG/RESEARCH</h3>
      </div>
      </div></a> 
    
    <a href="RUBIX%20LAYOUT/" style="text-decoration: none;">
    <div class="box" style="background: red">
      <div class="boxHover">
        <h3>SOUNDS...</h3>
      </div>
      </div></a> 
      
      <a href="RUBIX%20LAYOUT/" style="text-decoration: none;">
    <div class="box">
      <div class="boxHover">
        <h3>PORTFOLIO</h3>
      </div>
    </div></a>
    
 </div> <!-- /BOXGALLERY -->
  
  <!-- EMBED DO MIXCLOUD -->
  <!-- Player do Mixcloud como elemento fixo no rodapé -->
  <div id="mixcloud-player-container">
    <!-- Código de incorporação do Mixcloud usando uma div -->
    <div class="mixcloud-player">
      <iframe width="100%" height="60" src="Fescuta-me-por-favor%2F" frameborder="0"></iframe>
    </div>
  </div>
  
<!-- Rodapé -->
<footer>
  <h4>"Germani é, sobretudo, um DJ com sensibilidade, com o ouvido atento para interagir com o imaginário do pop e as surpresas de uma pista de dança."</h4>
  <h3 class="contact-info">Contato: [email protected]</h3>
  <div class="footer-links">
    <!-- LINKS DE RODAPÉ -->
    <b><a href="germaniusleviosa_/">INSTAGRAM</a></b>
    <div class="gif-container">
      <a href="#" class="voltar">voltar</a>
      <a href="RUBIX%20LAYOUT/"><img class="gif-button" src="i-25794.gif" alt="gif"></a>
    </div> 
    <b><a href="germani-souza/">MIXCLOUD</a></b>
  </div>
  <br><br><br>
</footer>