HTMLタグにwidthが設定されている

実現したいこと

レスポンシブに対応したい

前提

PCファーストでHTMLとCSSをコーディングしていて
レスポンシブをしようと思いどのように崩れているのか確認するとき
以下の画像にあるようにHTML自体にwidthが設定されている

イメージ説明

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>coding Practice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/sanitize.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <div class="container">
      <header class="header">
        <div class="header_inner">
          <img src="assets/images/logo_transparent.png" alt="coding Practice">
          <nav>
            <ul class="nav-box">
              <li class="nav-list"><a href="#">Top</a></li>
              <li class="nav-list"><a href="#">My Challenge</a></li>
              <li class="nav-list"><a href="#">Just Continue</a></li>
            </ul>
          </nav>
        </div>
      </header>
      <main>
        <section class="sec01">
          <img class="hero" src="assets/images/austin-distel-wawEfYdpkag-unsplash.png" alt="会社風景">
          <h1 class="main-title">Coding Practice Everyday!!</h1>
          <p class="sub-title">Start from HERE</p>
        </section>
        <section class="sec02">
          <h2 class="title">My Challenge</h2>
          <div class="flex">
            <article class="post">
              <img src="assets/images/brooke-cagle-g1Kr4Ozfoac-unsplash (1).png" alt="談話">
              <p class="flexible">もくもく会in大阪のコーディング
                イベントに参加してきました！！</p>
              <time datetime="2020-06-28">2020.06.28</time>
            </article>
            <article class="post">
              <img src="assets/images/brooke-cagle-NoRsyXmHGpI-unsplash.png" alt="笑顔の女性">
              <p class="flexible">模写コーディングを１つ終わらせ
                ることができました！！次はもう
                少し難しいものに挑戦します！</p>
              <time datetime="2020-07-02">2020.07.02</time>
            </article>
            <article class="post">
              <img src="assets/images/kevin-hendersen-MQ4eKnHtOUg-unsplash.png" alt="ライトアップ">
              <p class="flexible">「1冊ですべて身につくHTML&C
                SSとWebデザイン入門講座」を
                完走しました！！</p>
              <time datetime="2020-07-10">2020.07.10</time>
            </article>
          </div>
          <button class="more">もっと見る</button>
        </section>
        <section class="sec03">
          <h2 class="continue">Just Continue</h2>
          <p class="sec03_text">日々、学び続ける<br>
            いつか、Webで世界を今より少しだけ<br>
            よくするために<br>
            でも、今は自分のために<br>
            毎日少しずつ勉強する<br>
            そんな私と共に学んでくれる方を募集しています</p>
          <a class="sec03_button" href="#">お問い合わせしてみる</a>
        </section>
      </main>
      <footer>
        <p class="seisaku">制作時間　4時間</p>
      </footer>  
    </div>
  </body>
</html>


CSS

@charset "utf-8";

body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
a {
  text-decoration: none;
  color: #333;
}
* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1366px;
  margin: 0 auto;
}

/* 
header
*/
.header {
  height: 80px;
  background-color: #fff;
}
.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 980px;
  width: auto;
  margin: 0 auto;
}
.nav-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-list {
  margin-right: 20px;
}
.nav-list:last-of-type {
  margin-right: 0;
}
@media (max-width:768px){

}
/* 
sec01
*/
.sec01 {
  position: relative;
}
.hero {
  max-width: 1366px;
  width: auto;
}
.main-title {
  color: #fff;
  font-weight: bold;
  font-size: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-title {
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
}

/* 
sec02
*/
.sec02{
  background-color: #fff;
  padding: 60px 193px 88px;
  text-align: center;
}
.title {
  margin-bottom: 49px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post {
  display:flex;
  flex-direction: column;
  gap: 20px 20px;
  height: 310px;
  width: 310px;
  box-shadow: 2px 2px 2px 2px #eee ;
  text-align: left;
}
.post img{
  width: 100%;
  height: 168px;
  object-fit: contain;
  object-position: 0 0;
}
.flexible {
  margin: 0px 20px;
  flex-grow: 1;

}
.post time {
  margin: 0 20px;
}
.more {
  margin: 46px auto 0;
  padding: 17px 110px;
  border: 1px solid #EEEEEE;
  box-shadow: 0px 3px 6px 2px #eee;
  background-color: #fff;
  font-weight: bold;
}

/* 
sec03
*/
.sec03 {
  background-image: url(../images/tim-bogdanov-4uojMEdcwI8-unsplash.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1366px;
  height: 455px;
  text-align: center;
  color: #fff;
  padding: 59px 0 44px;
}
.continue {
  font-weight: bold;
  margin-bottom: 47px;
}
.sec03_text {
  margin-bottom: 50px;
  line-height: 28px;
}
.sec03_button {
  padding: 19px 25px;
  background-color: #83032A;
  color: #fff;
}

footer {
  height: 80px;
  color: #fff;
  background-color: #333333;
  line-height: 80px;
  text-align: center;
}
.seisaku {
  background-color: antiquewhite;
  color: #333;
}

回答1件

ベストアンサー

原因はここかな…？

diff
1/*
2sec03
3*/
4  .sec03 {
5  background-image: url(../images/tim-bogdanov-4uojMEdcwI8-unsplash.png);
6  background-repeat: no-repeat;
7  background-position: center;
8  background-size: contain;
9- width: 1366px;
10+ max-width: 1366px;
11  height: 455px;
12  text-align: center;
13  color: #fff;
14  padding: 59px 0 44px;
15  }