newbie Flexbox Responsiveness alignment issues

 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: pegermani@gmail.com</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>