レスポンシブ対応の際に要素が重なってしまいます

Question

実現したいこと

max-width: 810px;の際に、すべての要素が縦方向にきれいに並べられるようにしたいです。

発生している問題・分からないこと

max-width: 810px;の際に、最後のfeature-boxとfooter部分の要素が重なってしまっています
イメージ説明

リンク内容http://127.0.0.1:5500/

エラーメッセージ

上記の画像のように要素同士が重なってしまいます。

該当のソースコード

特になし

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

重なっている要素のheightを変更すれば解決できるとあったのですが、変更後も重なったままでした。

補足

今回初めて質問させていただくため、分かりにくい質問になってしまったのですが、回答していただければ幸いです、よろしくお願いします。
どこのコードが原因かわからないため、HTMLとCSSのコードは入力することができませんでした。
サイトのURLを記載しているのでそちから検証ツールを用いてコードをご確認ください、お手数をおかけしますがよろしくお願いします。

Comments

[juner]

http://127.0.0.1:5500/ はローカルのURLなのでこちらは確認できませんよ……？
codepen.io や livecodes.io 等の playground 系に転記するとよいかもしれません。

[Lhankor_Mhy]

ご提示のURLはローカルサーバのため、あなたのPCでしか見ることができないものです。
コードをご提示いただくのがいいかと思います。

実際のコードだと長すぎるでしょうから、問題の現象に関係のないと思われる部分を削除して小さくし、それでも問題が再現することを確認してからご提示いただくのがいいかと思います。
（この過程の中で問題の箇所が明らかになって自力で解決できてしまうこともよくあります）

[yugo4022]

回答いただきありがとうございます。
codepenでコードを転記しました、こちらの方で確認できるでしょうか。
https://codepen.io/Yg-K-the-typescripter/pen/mdNLqdj

[juner]

そのURLを 質問文に含めてください！（コメントを見ないと主題にアクセスできない様なものなので

Answer 1

こうするとどうですか？

@media screen and (max-width: 821px) {
    .main {
        width: 100%;
        margin-top: 80px;
        height: auto; /* 追加 */
    }

}

Comments

[yugo4022]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
レスポンシブ対応で行き詰っていたので本当に助かりました。