CSS: 余白の考え方

一つの考え方

上下の余白については外側の領域の padding として、そして要素間の余白については、2 番め以降の要素に margin-top を付けていく、という方法がおすすめです。どのような方法でも良いのですが、慣れないうちは、なんらかのルールがあると作業しやすくなります。

.hero に padding-top、そして img の方に margin-top を付けます。
div の中身に関してもこちらの考え方を使えば、.btn に対して margin-top を付けます。

これらをもっと詳しく勉強したい場合には、ドットインストール社が運営する、「書いて、読んで、ともに学ぶ」参加型プログラミング勉強会、256timesがオススメです。