Oi Gabriel, tudo bem com você?
Uma maneira bem tranquila de colocar o h4 e o p de um lado e o vídeo do outro lado é usando o display: flex!
Para fazer isso, primeiro vamos "abraçar" o h4 e o p em uma div isolada, e também faremos isso com o vídeo, ficando assim:
<section class="dianoivo">
<div class="dianoivo2">
<div>
<h4 class="tituloprincipal"> Fazemos seu Dia do Noivo! </h4>
<p> Você e seus padrinhos vão desfrutar de um ambiente exclusivo e reservado, com direito a bebidas, diversão e aquela resenha épica!</p>
</div>
<div>
<video width="560" height="400" controls="controls">
<source src="videobarbearia.mp4" type="video/mp4">
</video>
</div>
</div>
Repare que é como se tívessemos criado uma "caixinha" agrupando os elementos que você quer que fique lado-a-lado.
Agora aplicamos o display: flex no CSS do elemento pai dessas duas caixinhas que criamos, ou seja, no elemento que está envolvendo essas divs, que no caso é o div class="dianoivo2". Vai ficar assim:
.dianoivo2{
display: flex;
}
E pronto, já está lado-a-lado!
Agora, para ficar mais bonito ainda, você pode adicionar um justify-content: space-around; no CSS. Essa propriedade irá colocar um espaço ao redor das divs, o que vai distribuir melhor elas na tela. Fica assim:
.dianoivo2{
display: flex;
justify-content: space-around;
}
E prontinho!
Deixo como recomendação um material aqui da Alura que detalha um pouco melhor o uso do display: flex;:
Espero ter solucionado sua questão.
Caso ainda tenha alguma dúvida, me coloco à disposição!
Um abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
