モバイル端末で画面の途中で収まってしまうのでページいっぱいに広げたい

###前提
モバイル端末だと画面の半分に収まったり、途中で収まって白い余白ができる。

実現したいこと

画面いっぱいに表示させたい。

発生している問題・エラーメッセージ

検証でモバイル端末だと画面の途中で収まってしまう。

該当のソースコード

html

<main class="main"> <div class="title"> <h1>無料体験</h1> </div> <div class="sab-title"> <h2>対象学年と科目</h2> </div> <div class="chart"> <div class="wrap"> <table> <thead> <tr> <th></th> <th class="plan1"> <div class="subject">算数・数学</div> </th> <th class="plan2"> <div class="subject">英語</div> </th> <th class="plan3"> <div class="subject">国語</div> </th> <th class="plan4"> <div class="subject">理科</div> </th> <th class="plan5"> <div class="subject">社会</div> </th> </tr> </thead> <tr> <th>小５・６</th> <td class="plan1_i">●</td> <td class="plan2_i">▲</td> <td class="plan3_i">●</td> </tr> <tr> <th>中１〜３</th> <td class="plan1_i">●</td> <td class="plan2_i">●</td> <td class="plan3_i">●</td> <td class="plan4_i">●</td> <td class="plan5_i">●</td> </tr> <tr> <th>高１〜３</th> <td class="plan1_i">●</td> <td class="plan2_i">●</td> <td class="plan3_i">▲</td> <td class="plan4_i">▲</td> <td class="plan5_i">▲</td> </tr> </table> </div> </div> <div class="explanation"> <p>●：常時対応　▲：科目等、ご要望に応じて対応</p> </div> <div class="time"> <h3>時間</h3> <h4>・善通寺教室</h4> <p>火曜日〜土曜日　14:00~22:00（日・月は休校）</p> <h4>・丸亀教室</h4> <p>月・木・土曜日　17:00~21:30</p> </div> <div class="time-h2"> <h2>まずは、お電話にてお気軽にお問い合わせください。</h2> </div> </main> <!-- main --> <!-- footer --> <footer class="footer"> <nav class="site-menu"> <ul> <li><a href="./index.html">ホーム</a></li> <li><a href="./about-us,html">ステップについて</a></li> <li><a href="./experience.html">無料体験</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="./menu.html">お問合せ</a></li> </ul> </nav> <a class="footer-logo" href="./index.html"> <img src="./images/本文を追加.png" alt="KISSA"> </a> <p class="footer-tel">TEL 01-2345-6789</p> <p class="footer-time"></p> </footer> <!-- footer -->

CSS @charset "utf-8"; .title { height: 310px; background-image: url(../images/books-1204029_1280.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffffff; text-shadow: 1px 1px 10px #4b2c14; } .title h1 { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: bold; } .sab-title { margin: 0 auto; padding: 0; width: 850px; font-size: 14px; margin-top: 80px; margin-bottom: 10px; } .explanation { font-size: 15px; margin: 0 auto; margin-top: 15px; padding: 0; width: 850px; } table { border-collapse: collapse; margin: 0 auto; padding: 0; width: 850px; table-layout: fixed; } thead th { padding: 1em .8em; border-right: 5px solid#fff; } table tr { background-color: #fff; padding: .75em; } table tr:nth-child(even) { background-color: #f9f9f9; } table td { padding: .7em; text-align: center; } table th { font-size: .75em; } .plan1 { background: #03A9F4; } .plan1_i { color: #03A9F4; } .plan4 { background: #009688; } .plan4_i { color: #009688; } .plan3 { background: #4caf50; } .plan3_i { color: #4caf50; } .plan2 { background: #cddc39; } .plan2_i { color: #cddc39; } .plan5 { background: #6222b6; } .plan5_i { color: #6222b6; } .subject { color: #fff; font-weight: bold; font-size: 1.8em; text-align: center; margin-bottom: 10px } .subject span { font-size: .6em; } .time { margin: 0 auto; margin-top: 20px; padding: 0; width: 850px; color: rgb(72, 71, 71); line-height: 25px; } .time h3 { margin-top: 30px; font-size: 20px; padding-bottom: 10px; } .time h4 { font-size: 16px; } .time p { padding-left: 15px; } .time-h2 { height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffffff; text-shadow: 1px 1px 10px #5f5d5d; } .footer { margin-top: 50px; } @media (max-width: 800px) { .chart { overflow-x: scroll; } } ### 試したこと ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。