スマホで表示すると画面が崩れてしまう

質問内容

現在、模写コーディングを行っています。

以下が本家のサイトです。

https://www.pro-s.co.jp/seminar/seo/

PCでの表示は問題ないのですが、タブレットやスマホで表示すると画面が崩れてしまいます。

navや画像など、どのように書き直せばよいのでしょうか。

よろしくお願いいたします。

コード

・index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="uft-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>見込み客が増える！最新SEO徹底公開セミナー | 東京都品川区東五反田</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <div class="container">
        <img src="img/title.png">
        <div class="seo_start">
          <a href="#"><img src="img/seo_start.png"></a>
        </div>
      </div>
    </header>

    <nav>
      <div class="container">
        <ul>
          <li>
            <a class="list-trouble" href="#trouble"> お困りではありませんか？ </a>
          </li>
          <li>
            <a href="#contents">主な内容と費用</a>
          </li>
          <li>
            <a href="#seminar">セミナー情報</a>
          </li>
          <li>
            <a href="#map">アクセス</a>
          </li>
          <li>
            <a href="#">無料相談はこちら</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="trouble" id="trouble">
      <div class="container">
        <img src="img/trouble.png">
      </div>
    </div>

    <div class="seo">
      <div class="container">
        <img src="img/important.png">
      </div>
    </div>

    <div class="difficult">
      <div class="container">
        <img src="img/difficult.png">
      </div>
    </div>

    <div class="how">
      <div class="container">
        <img src="img/how.png">
      </div>
    </div>

    <div class="voice">
      <div class="container">
        <img src="img/voice.png">
      </div>
    </div>

    <div class="benefits">
      <div class="container">
        <img src="img/benefits.png">
      </div>
    </div>

    <div class="contents" id="contents">
      <div class="container">
        <img src="img/contents.png">
      </div>
    </div>

    <div class="seminar" id="seminar">
      <div class="container">
        <img src="img/coming_soon.png">
        <p>Coming Soon</p>
      </div>
    </div>

    <div class="map" id="map">
      <div class="container">
        <img src="img/map.png">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.0096552455734!2d139.72313901525732!3d35.62748848020684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188afb916d6e45%3A0x746c723ef66c7a97!2z5qCq5byP5Lya56S-44OX44Ot44OV44Kn44OD44K1!5e0!3m2!1sja!2sjp!4v1576262377055!5m2!1sja!2sjp" width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
      </div>
    </div>

    <div class="application">
      <div class="container">
        <img src="img/application_seo.png">
      </div>
      <div class="container2">
        <a href="#">
          <img src="img/application.png">
        </a>
      </div>
      <div class="container3">
        <img src="img/call.png">
      </div>
    </div>

    <div class="thank_you">
      <div class="container">
        <img src="img/thank_you.png">
      </div>
    </div>

    <footer>
      <div class="container">
        <p>Copyright 2017 株式会社プロフェッサ</p>
      </div>
    </footer>
  </body>
</html>

・style.css

@charset "utf-8";

body {
  margin: 0;
  max-width: 1400px;
  width: 100%;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.container {
  margin: 0 auto;
  text-align: center;
}

header {
  background-image: url(img/header.jpg);
  background-size: cover;
  text-align: center;
  padding: 215px 0 130px;
  position: relative;
}

.seo_start {
  position: absolute;
  top: 465px;
  left: 630px;
}

nav {
  background-color: #333;
  padding: 25px;
  position: sticky;
  top: 0;
}

nav ul {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  display: flex;
}

nav li {
  list-style-type: none;
  margin-right: 60px;
}

nav a {
  color: white;
  text-decoration: none;
  display: block;
}

nav a:hover {
  transition: all 0.2s;
  text-decoration: underline;
}

.list-trouble {
  margin-left: 200px;
}

.trouble {
  background-color: #f5f5f5;
  padding: 70px 0;
}

.seo {
  background-color: #eee;
  padding-bottom: 70px;
}

.difficult {
  padding-bottom: 70px;
}

.how {
  background-color: #f5f5f5;
  padding-bottom: 70px;
}

.voice {
  background-color: #eee;
  padding-bottom: 70px;
}

.benefits {
  background-color: #ffeeff;
  padding: 50px 0;
}

.contents {
  background-image: url(img/listen.jpg);
  background-size: cover;
  padding: 70px 0;
}

.seminar {
  background-color: #eee;
  padding: 70px 0 30px 0;
}

.seminar p {
  font-size: 30px;
}

.map {
  padding-top: 70px;
}

.map img {
  padding-bottom: 30px;
}

.application {
  background-color: #f5f5f5;
  padding: 50px 0;
}

.application .container {
  padding-bottom: 30px;
}

.application .container2 {
  text-align: center;
  padding-bottom: 30px;
}

.application .container2:hover {
  opacity: 0.7;
}

.application .container3 {
  text-align: center;
  padding-bottom: 30px;
}

.thank_you {
  background-color: #e7ddc4;
  padding: 50px 0;
}

footer {
  background-color: #333;
}

footer p {
  color: white;
  font-size: 14px;
  padding-top: 40px;
  margin: 0;
}