style.css の 57 行から 63 行の

.hero img {
 margin-top: 64px;
}

.hero .btn {
 margin-top: 64px;
}

のところで質問があります。

子孫セレクターとして、 img と .btn の上に空白を開けるところは理解できました。
そこで、子セレクターでやったらどうなるんだろうと思い、やってみたところ、
.hero > .btn の margin-top: 64px; が反映されない結果になりました。

自分なりに、.hero が .btn を指し、うまくいくんじゃないかと思ったのですが……
なぜここは、子セレクターではなく、子孫セレクターではうまくいかないかを教えていただきたいです。
よろしくお願いいたします。