Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Espaço no responsivo

Eu to com um problema que já perdi horas tentando resolver. Quando passo para o responsivo, aparece um espaço no lado direito que não faço idéia de onde venha. Ele empurra tudo para o lado esquerdo. Vou deixar meu código aqui, caso alguém queira me ajudar.

<!DOCTYPE html>
<html lang="pt-br">

<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>Grêmio Esportivo Castelinho</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="container principal">
        <div class="container_caixa">
            <h1 class="titulo_principal">Bem vindos!<br>Ainda estamos em fase de desenvolvimento e pedimos a compreensão de todos.
            </h1>
            <img class="container_imagem" src="assets/BANNER CAMPEÃO.png" alt="banner_do_time">
            <a class="botao_redes" href="https://instagram.com/gecastelinho62?igshid=NTc4MTIwNjQ2YQ==" target="_blank">Nosso Clube</a>
            <a class="botao_redes" href="https://www.facebook.com/profile.php?id=100082378605449" target="_blank">Nossa Comunidade</a>
        </div>
    </section>

    <section class="container secundario">
        <img class="secundario_imagem" src="assets/CATEGORIAS.png" alt="imagem_de_jogadores">
        <div class="secundario_descricao">
            <h2 class="descricao_titulo">INTEGRAÇÃO 2023</h2>
            <p class="descricao_paragrafo">O Campeonato Municipal Integração 2023 contará com uma novidade: o retorno da
                categoria "B". Decidido na última reunião, agora os clubes terão que montar dois times para a
                competição, com jogadores da categoria "A" não podendo disputar o campeonato da categoria "B". O
                Integração 2023 começa em junho e o Castelinho entra para defender o titulo. Mais informações em breve.
            </p>
        </div>
    </section>

    <section class="container secundario">
        <div class="secundario_descricao">
            <h2 class="descricao_titulo">AMISTOSO EM AMETISTA DO SUL</h2>
            <p class="descricao_paragrafo">Dia 28 de maio, o Campeão Municipal de Ametista, E.C. BEIRA-RIO, estará
                organizando uma grande confraternização, onde fomos convidados para entregar a faixa de campeão em
                amistoso. O jogo acontecerá na sede do Granada e tem horário previsto para as 15 horas. Haverá jogos
                durante o dia inteiro e um grande almoço. Fica aqui nosso agradecimento ao Beira-Rio e convidamos nossa
                comunidade e amigos para se fazerem presentes.</p>
        </div>
        <img src="assets/AMISTOSOAMETISTA.png" alt="imagem de amistoso em ametista do sul"
            class="secundario_imagem terceira_img">
    </section>

    <section class="container secundario">
        <img class="secundario_imagem" src="assets/castelinhobusa.png" alt="imagem_busanello_no_malmo">
        <div class="secundario_descricao">
            <h2 class="descricao_titulo">ENTREVISTA COM O "BUSA"</h2>
            <p class="descricao_paragrafo">Jornalista Gustavo Hoffmann, da ESPN, bate um papo com o lateral-esquerdo natural de Castelinho e destaque do Malmö, líder do Campeonato da Suécia. (A partir do minuto 57).</p>
            <a class="botao_redes secundario_botao" href="https://youtu.be/KXj1vVjb3pI" target="_blank">Assistir entrevista</a>
        </div>
    </section>

    <section class="patrocinadores">
        <h2 class="patrocinadores_titulo">Conheça nossos patrocinadores masters 2023</h2>
        <ul class="patrocinadores_lista">
            <li>
                <img src="assets/barril.png" alt="logo mercado barril">
            </li>
            <li>
                <img src="assets/gentil.png" alt="logo cereais gentil">
            </li>
        </ul>
        <ul class="patrocinadores_lista">
            <li>
                <img src="assets/complexo 34.png" alt="logo complexo 34">
            </li>
            <li>
                <img src="assets/sul brasil.png" alt="logo sul brasil pedras">
            </li>
        </ul>
    </section>
</body>

<footer class="rodape">
    <img class="rodape_logo" src="assets/logotradicional.png" alt="logo tradicional castelinho">
    <p class="rodape_paragrafo">2023, Grêmio Esportivo Castelinho. Todos os direitos reservados.</p>
    <p class="rodape_paragrafo">Desenvolvido por: Maicon Wrasse.</p>
</footer>

</html>
2 respostas
solução!

CSS

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Kanit', sans-serif;
}

:root {
    --cor-principal: #FDFDFE;
    --cor-secundaria: #37B5FE;
    --cor-de-fundo: #000;
}

body {
    background-color: var(--cor-de-fundo);
    color: var(--cor-principal);
}

.principal {
    background-image: url(assets/castelinho\ banner.png);
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    text-align: center;
}

.container_caixa {
    margin: 0 5em;
}

.container {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 2em 5em;
}

.titulo_principal {
    font-size: 28px;
}

.botao_redes {
    background-color: var(--cor-secundaria);
    color: #FDFDFE;
    padding: 1rem;
    border-radius: 5px;
    text-decoration: none;
    display: block;
    border: 1px solid var(--cor-principal);
    font-weight: 600;
    font-size: 17px;
    margin: 1em 0;
    text-align: center;
    transition: .3s;
}

.container_imagem {
    margin: 1em 0 2em 0;
    transition: .3s;
}

.secundario_imagem {
    width: 80%;
    transition: .3s;
}

.secundario_descricao {
    transition: .3s;
}

.secundario {
    align-items: center;
    margin: 0 5em;
}

.descricao_titulo {
    font-weight: 600;
    font-size: 35px;
    color: var(--cor-secundaria);
}

.secundario_botao{
    display: inline-block;
}
.terceira_img {
    padding: 0 0 0 5em;
}

.patrocinadores_titulo {
    color: var(--cor-secundaria);
    font-size: 40px;
    margin-top: 2em;
    margin-bottom: 2em;
    transition: .3s;
}

.patrocinadores_lista {
    display: flex;
    justify-content:space-around;
    list-style-type: none;
    margin: 0 5em 0 5em;
    transition: .3s;
}

.patrocinadores {
    text-align: center;
}

.lista_item {
    font-size: 28px;
    color: var(--cor-secundaria);
}

.rodape {
    text-align: center;
    margin: 5em;
    background-color: var(--cor-secundaria);
    padding: 2em;
}

.botao_redes:hover {
    background-color: var(--cor-de-fundo);
    color: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
    transform: translate3d(0, -10px, 0) scale(1.01);
    transition: .3s;
}

.botao_redes:active {
    background-color: var(--cor-principal);
    color: var(--cor-secundaria);
}

.patrocinadores_lista:hover {
    transform: translate3d(0, -10px, 0) scale(1.01);
    transition: .3s;
}

.container_imagem:hover {
    transform: translate3d(0, -10px, 0) scale(1.01);
    transition: .3s;
}

.secundario_imagem:hover {
    transform: translate3d(0, -10px, 0) scale(1.01);
    transition: .3s;
}

.secundario_descricao:hover {
    transform: translate3d(0, -10px, 0) scale(1.01);
    transition: .3s;
}

.patrocinadores_titulo:hover {
    color: var(--cor-principal);
    transform: translate3d(0, -10px, 0) scale(1.01);
    transition: .3s;
}


@media screen and (max-width:768px) {
    :root {
        margin: 0;
    }

    .body {
        margin: 0 0 0 4em;
        padding: 0;
    }

    .container {
        display: block;
        background-image: none;
        margin: 0;
    }

    .container_imagem {
        width: 50vh;
    }

    .container_caixa {
        margin: 2em 2em;
    }

    .secundario {
        margin: 0;
        text-align: center;
    }

    .secundario_imagem {
        width: 50vh;
    }

    .rodape_logo {
        text-align: center;
    }

    .patrocinadores_lista {
        display: block;
    }

    .descricao_titulo {
        display: block;
        align-items: center;
    }

    .descricao_paragrafo {
        text-align: center;
    }
}

Já resolvi. Dps de hrs achei o erro :D