flex:1 は横並びにしたふたつの div の幅を均等にするためのものでしたが、container をつけた div にも適用されてしまったため、両端いっぱいまで広がってしまったということですね。

とありましたが、

1. hero の中に <h2>、 <p>、 <a> を囲う div① と img を囲う div② が元々あり、後から div① と div② を囲う新たな <div class="container"> という div③ が増えた。なので flex:1 は ①、②、③に適応される。

.hero container div {
  flex: 1;
}

にする必要があること。
というのは理解できたのですが、
③ 適応されたから両端いっぱいまで広がる意味がわからないです。③ が ①、② の親要素だからでしょうか。
また、flex: 1; のセレクタに container を追記しなくても見た目は変わりませんでしたが変えなければいけない理由はありますか？