Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

o video não fica centrlizado

na parte do video eu coloquei uma classe chamado video, porem quando eu coloco margin, nesse estilo "margin 2em auto;" ele não acaba não ficando centralizado, o que pode estar acontecendo?

segue o codigo:

//HTML
<section class="mapa">
                        <h3 class="titulo-principal">Nosso estabelecimento</h3>
                        <p>Nosso estabelecimento encontra-se:</p>

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3465.253048031703!2d-52.42893380175626!3d-29.71242845749445!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x951ca347584507f3%3A0x87a53f8242cfe00e!2sImobili%C3%A1ria%20Imobel!5e0!3m2!1spt-BR!2sbr!4v1598629141760!5m2!1spt-BR!2sbr" 
                        width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" 
                        aria-hidden="false" tabindex="0"></iframe>
                        <div class="video">
                            <iframe width="70%" height="400px" src="https://www.youtube.com/embed/f1dIOGYabKc?start=1" 
                            frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
                            allowfullscreen></iframe>
                        </div>
                    </section>
//CSS
.video{
    margin: 2em auto;
}
1 resposta
solução!

Você está tentando centralizar a div (a qual já ocupa a largura da página). Se você definir uma largura para esta div, ai sim você conseguiria centralizá-la, como por exemplo;

.video{
    width: 800px;
    margin: 2em auto;        
}

O vídeo ocuparia 70% deste valor, pois no iframe a largura está definida para 70%.

Mas por mais simples que pareça, se você aplicar um text-align center na div ela vai centralizar o vídeo.

.video{
    text-align: center;
}