レスポンシブル対応の際に、widthを100%にしても画像が画面いっぱいに広がらない

実現したいこと

画面サイズが860px以下になった際に、バナー画像が画面いっぱいに表示
されるようにしたいのですが、

現状だと、バナーの画像がなぜか860px以下になると変更できないです。

該当のソースコード

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" type="text/css" href="base.css">
</head>

<body>
  <div class="header">
    <div class="header-logo">
      <img src="./images/logo_icon.png" alt="企業ロゴ">
      <img src="./images/logo_name.png" alt="企業名">
    </div>
    <div class="menu">
      <ul>
        <li>VISION</li>
        <li>SERVICE</li>
        <li>COMPANY</li>
      </ul>
    </div>
  </div>
  <div class="main">
    <div class="main-content">
      <div class="vision">
        <h2>VISION</h2>
        <div class="vision-content">
          <ul>
            <p>・ 私たちは情熱を持ってあらゆるニーズに対応していきます。</p>
            <p>・ 努力を怠らない事によりやりたいことを追求し続けます。</p>
            <p>・ 最大限のパフォーマンスを発揮し効果を出し続け相乗効果を生み出します。</p>
          </ul>
        </div>
      </div>
      <div class="service">
        <h2>SERVICE</h2>
        <div class="service-content">
          <div class="box">
            <img src="./images/system_development.jpg">
            <p>あらゆる受託開発においてプロフェッショナル集団がお客様の環境変化に対応・改善し常に最適化されたシステムにしていきます。</p>
          </div>
          <div class="box">
            <img src="./images/outsourcing.jpg">
            <p>javaやPHP、オープン系開発からネイティブアプリ、デザインやWebディレクションなど、幅広い領域に対応しております。</p>
          </div>
          <div class="box">
            <img src="./images/recruit.jpg">
            <p>専門分野に特化したエージェントがお仕事をご紹介します。</p>
          </div>
        </div>
      </div>
      <div class="company">
        <h2>COMPANY</h2>
        <div class="company-content">
          <table>
            <tbody>
              <tr>
                <th>会社名</th>
                <td>株式会社質問</td>
              </tr>
              <tr>
                <th>代表</th>
                <td>質問太郎</td>
              </tr>
              <tr>
                <th>資本金</th>
                <td>500万円</td>
              </tr>
              <tr>
                <th>本社住所</th>
                <td>東京都港区</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="sub-content">
      <div class="banner">
        <ul>
          <li>
            <img src="./images/banner.png">
          </li>
          <li>
            <img src="./images/banner.png">
          </li>
          <li>
            <img src="./images/banner.png">
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-line"></div>
    <div class="footer-logo">
      <img src="./images/logo_icon.png" alt="企業ロゴ">
    </div>
    <div class="copyright">
      <h1>Copyright ©︎ 2020 Linew inc. All Rights Reserved.</h1>
    </div>
  </div>
</body>

</html>

CSS

@charset "UTF-8";

/* reset */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
img,
form,
table,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	list-style-type: none;
	border-collapse: collapse;
}

textarea {
	font-size: 100%;
	vertical-align: middle;
}

img {
	border-style: none;
	display: block;
}

hr {
	display: none;
}

em {
	font-style: normal
}

input {
	line-height: auto;
	vertical-align: middle;
}

strong.more {
	color: #c30
}

a {
	text-decoration: none;
}

html {}

body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* 上の部分は気にせずここから書く */


body {
	background-color: #eaeaea;
}

/*----------header-----------
---------------------------*/
.header {
	width: 100%;
	margin: 0 auto;
}

.header-logo {
	margin: 0 auto;
	width: 100%;
	max-width: 980px;
	display: flex;
}

.menu {
	width: 100%;
	background-color: #279b8f;
}

.menu ul {
	display: flex;
	list-style: none;
	justify-content: space-around;
	background-color: #279b8f;
	color: white;
	max-width: 980px;
	margin: 0 auto;
}

.menu ul li {
	width: 100%;
	border-left: 0.5px white solid;
	text-align: center;
	padding: 2px;
}

.menu ul li:last-child {
	border-right: 0.5px white solid;
}

/*----------main-----------
---------------------------*/

.main {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
}

.main-content {
	margin: 0 auto;
	width: 71.429%;
	max-width: 700px;
}

.vision {
	max-width: 700px;
}

.vision h2 {
	color: white;
	background-color: #279b8f;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 5px 0px 5px 20px;
}

.vision p {
	margin: 5px 0px;
}

.service h2 {
	color: white;
	background-color: #279b8f;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 5px 0px 5px 20px;
}

.service-content {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.box {
	text-align: justify;
	width: 220px;
}

.box p {
	font-size: 0.9rem;
	margin-top: 7%;
}

.company h2 {
	color: white;
	background-color: #279b8f;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 5px 0px 5px 20px;
}

table {
	font-size: 18px;
	border-collapse: separate;
	border-spacing: 15px 20px;
	margin-bottom: 20px;
}

tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
}

.sub-content {
	margin-top: 20px;
	margin-left: 20px;
	width: 28.571%;
	max-width: 260px;
}

.banner img {
	border-style: none;
	display: block;
	margin-bottom: 20px;
}

/*----------footer-----------
---------------------------*/

.footer {
	background-color: #eaeaea;
	width: auto;
}

.footer-line {
	width: 100%;
	border-bottom: 3px solid #279b8f;
}

.footer-logo img {
	margin: 0px auto;
	padding: 20px;
}

.copyright {
	width: 100%;
	background-color: #279b8f;
}

.copyright h1 {
	text-align: center;
	color: white;
}

/*レスポンシブル対応*/

@media screen and (max-width:860px) {
	.main {
		width: 100%;
		display: block;
	}

	.main-content {
		width: 100%;
		margin: 0 auto;
	}

	.service-content {
		display: block;
		width: 0 auto;
		width: 100%;
		flex-direction: column;
	}

	table {
		width: 100%;
		table-layout: fixed;
		font-size: 14px;
	}

	th,
	td {
		display: block;
		text-align: left;
		padding: 0;
		margin-top: 3%;
	}

	td {
		width: 100%;
		border-bottom: 3px solid #279b8f;
	}

	.box {
		width: 100%;
		display: flex;
		margin-bottom: 5px;
	}

	.box img {
		width: auto;
	}

	.box p {
		width: auto;
		margin-left: 3px;
	}

	.vision,
	.service,
	.company {
		margin-right: auto;
		margin-left: auto;
		width: 98%;
	}

	.sub-content {
		width: 100%;
		margin: 0 auto;
	}

	.banner img {
		width: 100%;
		margin-bottom: 10px;
	}

}

行動規範の内容に同意します

回答1件

ベストアンサー

.sub-contentにmax-width: 260px;が設定されているのでそれ以上大きくはなりません。下記のようにmax-width: 100%;で上書きすればいいでしょう。

css
1/*レスポンシブル対応*/
2
3@media screen and (max-width:860px) {
4
5 /* 中略 */
6
7	.sub-content {
8		width: 100%;
9		max-width: 100%; /* 追加 */
10		margin: 0 auto;
11	}
12
13 /* 中略 */
14
15}