画像の中に入っている文字が実はフッター要素で記述している部分なんです。
しかし、main要素である画像の上に表示されています。
この問題をどう解決したかを説明します。
##position:absolute;を用いて、フッターの位置を下に固定する
pisition:absolute;
bottom:0;
このように記述することでフッターの位置を一番下に固定できます。
Taneppa! こちらのサイトを参考にさせていただきました。より詳しい解説はこちらをご覧ください。
##フッターの要素を取り出す
実は上の方法では私の問題は解決できませんでした。
そこで今回は,
<main>
問題があったfooter内のcode
</main>
<footer>
<footer>
このように力技になりますがfooter内で書くことを諦め、mainタグ内の一番下に記述する。
その後上で説明したpositionで位置を固定することでフッターのように見せることが出来ました。
下が変更後のページになります。
以上が私の解決策になります。
他の解決策があれば、アドバイスお願いいたします。