レスポンシブ対応時に画面のサイズが変えられない

こんにちは。レスポンシブ対応のコードについて悩んでいます。

下記にある「My　Challenge」の下の画像と文章を、７６８ｐｘのサイズで見た際に、ヘッダーの画像と同じサイズになるようしたいです。
ところが、下に張り付けた画像の通り、検証ツールで見ると左右に大きな余白が開いてしまいます。メディアクエリにいくら入力してもサイズが変わりません。
どのようにしたら画面いっぱいにできるか、、教えていただけると幸いです。

cssでは最初に「max-width:100%;」を設定しており、それが影響していることは分かりました。
ただし、それを解除すると、今度はパソコンサイズにした時に画像が大きく引き伸ばされてしまいます。

HTML
1<!DOCTYPE html>
2<html>
3
4
5<!-- headのスタート　-->
6
7  <!-- 3つの必須要素 -->
8   <head><!-- ３つの必須要素がある -->
9   <meta charset="utf-8"><!-- 文字化けを防ぐ -->
10   <title>初級編</title><!-- ブラウザのタブ上の表示 -->
11   <meta name="description" content="">
12   <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"><!-- resetCSS -->
13  <!-- google fonts -->
14   <link rel="stylesheet" href="stylesheet.css"/><!-- CSSを引っ張る -->
15   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><!-- ファビコン-->
16   <meta name="viewport" content="width=device-width, initial-scale=1"><!-- レスポンシブ対応用　-->
17   
18  <!--　3つの必須要素 -->
19
20 </head>
21<!-- headのゴール -->
22<header>
23<div class="header">
24 <img src="../初級模写版/top/logo_transparent.png">
25 <ul>
26   <li><a href="#">Top</a></li>
27   <li><a href="#">My challenge</a></li>
28   <li><a href="#">Just Continue</a></li>
29 </ul>
30</div>
31
32 <div class="bg wrapper">
33 <h2>Coading Practice Everyday!!</h2>
34 <p>Start from HERE</p>
35 </div>
36</header>
37
38<main>
39  <div class="main">
40  <h2>My Challenge</h2>
41  <div class="items">
42    <div class="item1 wrap">
43     <img src="top/brooke-cagle-g1Kr4Ozfoac-unsplash (1).png">
44     <p class="word">もくもく会in大阪のコーディングイベントに参加してきました！！</p>
45     <p class="bottom">2020.06.28</p>
46    </div>
47
48    <div class="item2 wrap">
49      <img src="top/brooke-cagle-NoRsyXmHGpI-unsplash.png">
50      <p class="word">模写コーディングを１つ終わらせることができました！次はもう少し難しいものに挑戦します！</p>
51      <p class="bottom">2020.07.02</p>
52    </div>
53
54    <div class="item3 wrap">
55        <img src="top/kevin-hendersen-MQ4eKnHtOUg-unsplash.png">
56        <p class="word">「一冊で身に着くHTML＆CSSとWebデザイン入門講座」を完走しました！！</p>
57        <p class="bottom">2020.07.10</p>
58     </div>
59    </div>
60
61    <a  href="#">もっと見る</a>
62
63  </div>
64  
65
66
67  <div class="continue bgbg">
68    <h2>Just Continue</h2>
69    <p>
70      日々、学び続ける<br>
71      いつか、Webで世界を今より少しだけ<br>
72      よくするために<br>
73      でも、今は自分のために<br>
74      毎日少しずつ勉強する<br>
75      そんな私と共に学んでくれる方を募集しています    
76    </p>
77    <a href="#">お問い合わせしてみる</a>
78    </div>
79  
80</main>
81
82<footer>
83  <p><small>copiryight(C) 2020 ○○ログ All Rights Reserved.</small></p>
84</footer>
85
86<!-- bodyのスタート -->
87 <body>
88 
89 </body>
90<!-- bodyのゴール -->
91
92  
93

CSS
1@charset "UTF-8";
2
3
4html{font-size:100%}/*ユーザーの文字の大きさを反映する*/
5body{
6    font-family: "Helvetica Neue",
7      Arial,
8      "Hiragino Kaku Gothic ProN",
9      "Hiragino Sans",
10      Meiryo,
11      sans-serif;
12   }
13
14
15a {
16    text-decoration: none;
17}
18img {
19    width:100%;
20    max-width: 100%;
21    height:auto;
22}
23li{
24    list-style: none;
25}
26
27/*------headerCSS------*/
28.header{
29    width:100%;
30    padding:0px 193px 0px 193px;
31    display:flex;
32    justify-content: space-between;
33}
34@media (max-width: 768px) {
35    .header{
36        width:100%;
37        padding:0px 50px 0px 50px;
38        height:60px;
39    }
40}
41
42.header img{
43    padding:20px 0px 20px 20px;
44}
45
46
47.header ul{
48    display: flex;
49}
50.header li{
51    padding:30px 20px 31px 0;
52}
53@media (max-width: 768px) {
54    .header li{
55    padding:20px 10px 20px 0;
56    }
57}
58.header a{
59    text-align: left;
60    font: normal normal bold 16px;
61    letter-spacing: 0px;
62    color: #333333;
63    opacity: 1;
64}
65
66.bg{
67    background-image: url(../初級模写版/top/austin-distel-wawEfYdpkag-unsplash.png);
68    height:551px;
69    border: 1px solid #707070;
70    opacity: 1;
71    text-align: center;
72    background-position: center;
73    background-size: cover;
74}
75@media (max-width: 768px) {
76    .bg{
77        width:100%;
78    }
79}
80.bg h2{
81    padding:254px 0px 10px 0px;
82    font: normal normal bold 36px/44px Helvetica Neue;
83    letter-spacing: 0px;
84    color: #FFFFFF;
85    opacity: 1;
86}
87
88@media (max-width: 768px) {
89    .bg h2{
90        font-size:32px;
91    }
92}
93
94.bg p{
95    font: normal normal bold 16px/19px Helvetica Neue;
96    letter-spacing: 0px;
97    color: #FFFFFF;
98    opacity: 1;
99}
100
101
102.main{
103 padding:0px 193px 0px 193px;   
104 text-align: center;
105 margin-bottom: 88px;
106}
107.main h2{
108    padding:60px 0 49px 0;
109    font: normal normal bold 32px/39px Helvetica Neue;
110    letter-spacing: 0px;
111    color: #333333;
112    opacity: 1;
113}
114.items{
115    display: flex;
116    position: relative;
117}
118@media (max-width: 768px) {
119    .items{
120        flex-direction: column;
121    }
122}
123.wrap{
124    height:336px;
125    width:310px;
126    background: #FFFFFF 0% 0% no-repeat padding-box;
127    box-shadow: 0px 3px 6px #00000029;
128    opacity: 1;
129}
130.items p{
131    padding:20px 23px 0 20px;
132    text-align: left;
133}
134.word{
135    font: normal normal bold 18px/27px;
136    letter-spacing: 0px;
137    color: #333333;
138    opacity: 1;
139}
140.bottom{
141    position: absolute;
142    bottom:20px;
143    font: normal normal normal 16px/18px;
144    letter-spacing: 0px;
145    color: #333333;
146    opacity: 1
147}
148
149.item1{
150    margin-right:25px;
151}
152.item3{
153    margin-left:25px;
154}
155@media (max-width: 768px) {
156    .items{
157        display:inline-block;
158        margin:0 auto;
159    }
160    .item1,.item3{
161        display:inline-block;
162        margin:0 auto;
163    }
164}
165
166
167.items img{
168    max-width:310px;
169    height:172px;
170    border: 1px solid #707070;
171}
172
173@media (max-width: 768px) {
174    .itemas{
175    
176    }
177}
178
179.main a{
180    display:inline-block;
181    background: #FFFFFF 0% 0% no-repeat padding-box;
182    box-shadow: 0px 3px 6px #00000029;
183    border: 1px solid #EEEEEE;
184    border-radius: 5px;
185    opacity: 1;
186    padding:17px 110px;
187    margin-top: 46px;
188    color: #333333;
189}
190
191.bgbg{
192    background-image: url(../初級模写版/top/tim-bogdanov-4uojMEdcwI8-unsplash.png);
193    width:100%;
194    height:455px;
195}
196.continue{
197    text-align: center;
198}
199.continue h2{
200    padding-top: 59px;
201    padding-bottom: 47px;
202    font: normal normal bold 36px/44px Helvetica Neue;
203    letter-spacing: 0px;
204    color: #FFFFFF;
205    opacity: 1;
206}
207.continue p{
208    font: normal normal bold 16px/28px;
209    letter-spacing: 0px;
210    color: #FFFFFF;
211    opacity: 1;  
212}
213.continue a{
214    display:inline-block;
215    margin-top:50px;
216    background: #83032A 0% 0% no-repeat padding-box;
217    box-shadow: 0px 3px 6px #00000029;
218    color:#FFFFFF;
219    border-radius: 5px;
220    opacity: 1;
221    padding:19px 25px;
222}
223
224footer{
225    text-align: center;
226    background: #333333 0% 0% no-repeat padding-box;
227    opacity: 1;
228    height: 80px;
229    font: normal normal bold 14px/17px Helvetica Neue;
230    letter-spacing: 0px;
231    color: #FFFFFF;
232    opacity: 1;
233    padding-top: 32px;
234}

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

回答2件

hatena19様
ご回答くださり、ありがとうございます^ - ^
帰宅し次第、すぐに修正します。

アドバイスもくださり、ありがとうございます。
メディアクエリーの学習も併せて行っていきます。

投稿2021/02/15 10:59

aiueo1107

総合スコア2

ベストアンサー

下記のコードで左右パディングを193pxと設定しているのが原因の一つですね。

css
1.main{
2 padding:0px 193px 0px 193px;   
3 text-align: center;
4 margin-bottom: 88px;
5}

この後に下記のように 768px以下のときはパディングを0にするコードを挿入しましょう。

css
1@media screen and  (max-width: 768px) {
2  .main{
3    padding: 0;   
4  }
5}

ただ、それだけではうまくいかないですね。
他にも width:310px; とか max-width:310px;とか幅を固定しているコードが多数ありますので、それも打ち消す必要があります。

そもそも、左右パディングを193pxと固定するということ自体レスポンシブ対応としてはまずいですね。
@mediaクエリの書き方も含めて、一度レスポンシブ対応について学習しなおして一から設計しなおした方が速いような印象です。

投稿2021/02/15 00:42

hatena19

総合スコア34075

aiueo1107

2021/02/15 21:06

hatena１９様ご回答くださり、ありがとうございます。幅を固定してしまっているのが原因なのですね。レスポンシブ対応にあたり、基盤となるCSSをどのように書いたらいいのか、まだよく理解していないことが分かりました。続けて学習して参ります。ありがとうございます！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブ対応時に画面のサイズが変えられない

関連した質問