レスポンシブデザインで横スクロールが出てしまう

レスポンシブデザインに横スクロールが出てしまいます。どこかの要素が横に出てしまっているということはわかるのですが、F12で調べてみてもはみ出している要素がありません。そもそもhtmlやbodyの幅をレスポンシブデザインより狭くしても横スクロールが出てしまいます。

原因が全く分からず困っているので解決方法を教えていただきたいです。以下模写コーディングさせてもらっているページです
https://code-step.com/demo/html/store1/

<body>
    <!------------------------------------------------------------------------->
    <header>
      <div class="header-container">
        <h1><img src="https://code-step.com/demo/html/store1/img/logo.svg"></h1>
      </div>
    </header>

    <!------------------------------------------------------------------------->
    <main>
      <section class="text-wrapper">
        <div class="container">
          <div class="text-text">
            <h2 class="section-title">A special, long article in a newspaper or magazine</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>

          <div class="text-contents">
            <div class="archive">
              <img class="archive-image" src="https://code-step.com/demo/html/store1/img/magazine-archive.jpg">
              <div class="archive-text">
                <span class="text">Archibe</span>
                <p class="text">テキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </div>

            <div class="new">
              <img src="https://code-step.com/demo/html/store1/img/magazine-new.jpg">
              <dic class="new-text">
                <span class="text">New</span>
                <p class="text">テキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!------------------------------------------------------------------------->
      <section class="Fashion-Style-wrapper">
        <div class="container">
          <h2 class="section-title">Fashion & Style</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <a href="#">Read More</a>
        </div>
      </section>

      <!------------------------------------------------------------------------->
      <section class="Catalog-Antique-wrapper">
        <div class="container">
          <div class="catalog">
            <img src="https://code-step.com/demo/html/store1/img/catalog.jpg">
            <div class="catalog-text">
              <h2 class="section-title">Catalog</h2>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
          </div>
          <div class="antique">
            <div class="antique-text">
              <h2 class="section-title">Antique</h2>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <a href="#">Read More</a>
            </div>
            <img src="https://code-step.com/demo/html/store1/img/antique.jpg">
          </div>
        </div>
      </section>
    </main>

    <!------------------------------------------------------------------------->
    <footer>
      <div class="container">
        <dic class="footer-top">
          <img src="https://code-step.com/demo/html/store1/img/logo.svg">
          <ul>
            <li>タイトル</li>
            <li>-テキストテキストテキスト</li>
            <li>-テキストテキストテキスト</li>
            <li>-テキストテキストテキスト</li>
            <li>-テキストテキストテキスト</li>
            <li>-テキストテキストテキスト</li>
          </ul>
          <ul>
            <li>タイトルタイトルタイトル</li>
            <li>テキストテキストテキストテキストテキストテキストテキスト</li>
            <li>テキストテキストテキストテキストテキストテキストテキスト</li>
            <li>テキストテキストテキストテキストテキストテキストテキスト</li>
            <li>テキストテキストテキストテキストテキストテキスト</li>
          </ul>
        </div>

        <div class="footer-bottom">
          <p>© Mag88</p>
        </div>

      </div>
    </footer>
  </body>

```ここに言語を入力
html {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

body {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.container {
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
  display: inline-block;
  border: 1px solid black;
  padding: 10px 30px;
  font-size: 12px;
}

a:hover {
  opacity: 0.7;
}

p {
  font-size: 14px;
}

.section-title {
  font-size: 21.5px;
}

/*----------------------------------------------------------------------------*/
header {
  height: 100vh;
}

.header-container {
  background-image:url(https://gipp.ru/upload/iblock/e9a/e9a05b3b552f13aff8cb037cd3716bfc.jpg);
  background-size:  cover;
  height: 100vh;
}

header h1 {
  text-align: right;
  margin: 0px;
  padding: 0px;
}

header img {
  margin: 30px 30px 0px 0px;
}

/*----------------------------------------------------------------------------*/
.text-wrapper {
  margin: 80px 0px;
}

.text-text {
  padding: 0 220px;
}

.text-text p {
  padding: 0 20px;
}

.text-wrapper img {
  width: 100%;
}

.text-contents {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.text-contents span {
  font-size: 20px;
}

.archive {
  width: 50%;
  position: relative;
  padding-right: 10px;
}

.archive:hover {
  opacity: 0.7;
}

.archive-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  padding: 10px 35px;
  width:300px;
}

.new {
  width: 50%;
  position: relative;
  padding-left: 10px;
}

.new:hover {
  opacity: 0.7;
}


.new-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  padding: 10px 35px;
  width:300px;
}

.text {
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: white;
}


/*----------------------------------------------------------------------------*/
.Fashion-Style-wrapper {
  background-image:url(https://www.flaunter.com/wp-content/uploads/2018/11/iabzd-607239-unsplash.jpg);
  background-position: center;
  background-size:cover;
  height: 70vh;
  width: 100%;
  position: relative;
  margin-bottom: 80px;
}

.Fashion-Style-wrapper .container{
  position: absolute;
  left: 0;
  right: 0;
  margin: 40px auto 0px auto;
  padding: 0 240px;
}

/*----------------------------------------------------------------------------*/
.Catalog-Antique-wrapper {
  background-color: #EEEEEE;
}

.catalog {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Catalog-Antique-wrapper .container img {
  width: 48%;
  height: 100%;
}

.catalog-text {
  width: 50%;
  padding: 15px;
  height: 100%;
}

.catalog-text p {
  text-align: left;
}

.antique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 80px 0;
}

.antique-text {
  width: 50%;
  padding: 15px;
}

.antique-text p {
  text-align: left;
}

/*----------------------------------------------------------------------------*/
footer {
  background-color: #333;
}
footer li {
  font-size: 13px;
  margin-bottom: 4px;
}

footer li:first-child {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50vh;
  color: white;
  text-align: left;
}

.footer-bottom {
  text-align: center;
  padding: 23px 0px;
  background-color: white;
}

.footer-bottom p {
  font-size: 10px;
}

@media (max-width:896px) {

  html {
    width: 750px;
  }


  .container {
    width: 100%;
  }

  .text-contents {
    flex-direction: column;
  }

  .archive {
    width: 90%;
  }

  .new {
    width: 90%;
    padding-left: 0px;
  }

  .Catalog-Antique-wrapper .container {
    flex-direction: column;
  }

  .catalog {
    flex-direction: column;
  }

  .antique {
    flex-direction: column;
  }

  .footer-top {
    flex-direction: column;
  }

}