4
respostas

Meu vídeo não alinha

Olá tudo bem? segui o que o professor falou porém não alinha

section class = "benefícios">
        <h2 class= "titulo-principal"> Benefícios</h2>

        <ul>
            <li class = "itens">Atendimento aos clientes</li>
            <li class = "itens">Espaço diferenciado</li>
            <li class = "itens">Localização </li>
            <li class = "itens">Profissionais Qualificados</li>
        </ul>

        <img src="beneficios.jpg" class="imagembeneficios"> 

        <div class="video"></div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    </section>
</main>
    <footer>
        <img src="logo-branco.png">
        <p class="copyright"> © Copyright Barbearia Alura 2019</p>
    </footer>
    </main>
</body>
</html>
.mapa {
    padding: 3em 0;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.video {
    width:560px;
    margin:1em auto;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

o iframe não deveria estar dentro da div.video ?

caso esse seja o problema, também é melhor mudar o css da classe .video para

.video { max-width: 560px; width: 100%; margin:1em auto; }

.video iframe { width: 100%; }

assim fica responsivo

ou até mesmo usar algo assim para o iframe ficar responsivo depois de conseguir alinhar https://css-tricks.com/aspect-ratio-boxes/

Sua div está fechando assim que você abre ela da uma olhada depois do class="video" a div já ta fechando, se você tirar a ele vai funcionar.