O primeiro com a classe dentro da DIV
<div class="mapa-conteudo" >
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d58501.868564676515!2d-46.653462045713255!3d-23.59117519782662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1salura%20sp!5e0!3m2!1spt-BR!2sbr!4v1588363199914!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
O segundo com a classe diretamente na TAG:
<iframe class="mapa-conteudo" src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d58501.868564676515!2d-46.653462045713255!3d-23.59117519782662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1salura%20sp!5e0!3m2!1spt-BR!2sbr!4v1588363199914!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
CSS
.mapa-conteudo{
width: 940px;
margin: 0 auto;
}
Qual a diferente entre colocar a classe dentro da DIV ou dentro da TAG ? Por que altera o comportamento ?