Não entendi porque o comportamento do background do mapa mostrado em 3:41 mudou quando foi envolvido na tag div
O que eu entendi do comportamento foi:
O background vermelho foi aplicado sobre a largura da section com a classe mapa, que era elemento pai do iframe, por isso ficou sobrando espaço nos lados
Quando se removeu a definição de width da classe mapa , pelo que entendi a width 100% definida no iframe passou a ser sendo calculada sobre a largura da tela como elemento pai raiz
Então criou-se a div com a classe mapa-conteudo para ser elemento pai do iframe e se definiu witdh ali. Agora o 100% do iframe deveria ser aplicado a largura desse elemento pai, presumo, o que fez o mapa centralizar
Se esse meu raciocínio está correto o novo background laranja mostrado em 5:34 também deveria se aplicar à largura do elemento pai (div) , como aconteceu com a width do iframe. Mas não foi o que aconteceu :/
Não entendi qual o erro do meu raciocínio e como explicar esse comportamento... A Hierarquia dos elementos não é relevante? Só as classes estão importando? Como funciona isso?