ウィンドウを小さくしたときに現れる余白を消したい

模写の練習をしています。
以下のようなページを作っていて、大画面で見たときにはきれいに表示されるのですが、
ウィンドウを小さくすると右側に余白が大きくついています。

何が原因でしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12 <div class="header-wrapper">
13   <header>
14     <img src="https://prog-8.com/images/html/advanced/main_logo.png">
15    <div class="menu">  
16      <a href="">レッスン</a>
17      <a href="">新規登録</a>
18      <a href="">ログイン</a>
19    </div>
20   </header>
21 </div>
22     
23    
24 <div class="wrapper">
25  <div class="container">
26    <div class="top-message">
27    <h1>LEARN TO CODE.</h1>
28    <h1>LEARN TO BE CREATIVE.</h1>
29    <p>Progateはオンラインプログラミング学習サービスです。</p>
30    <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
31    </div>
32      
33  <div class="btn-wrapper">
34    <a class="new" href="">新規登録はこちら</a>
35    <p>or</p>
36    <a class="facebook" href=""><span class="fa fa-facebook"></span>Facebookで登録</a>
37    <a class="twitter" href=""><span class="fa fa-twitter"></span>Twitterで登録</a>
38  </div>
39  </div>
40 </div>
41 
42 <div class="lesson-wrapper">
43   <h2>Learn Where to Get Started!</h2>
44   <div class="lessons">
45     <div class="lesson">
46       <div class="icon">
47       <img src="https://prog-8.com/images/html/advanced/html.png">
48       <p>HTML&amp;CSS</p>
49       </div>
50       <div class="text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</div>
51     </div>
52  
53     <div class="lesson">
54        <div class="icon">
55       <img src="https://prog-8.com/images/html/advanced/jQuery.png">
56       <p>JQuery</p>
57       </div>
58       <div class="text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</div>
59     </div>
60   
61   
62     <div class="lesson">
63        <div class="icon">
64       <img src="https://prog-8.com/images/html/advanced/ruby.png">
65       <p>Ruby</p>
66       </div>
67       <div class="text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</div>
68     </div>
69   
70  
71     <div class="lesson">
72        <div class="icon">
73       <img src="https://prog-8.com/images/html/advanced/php.png">
74       <p>PHP</p>
75       </div>
76       <div class="text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</div>
77     </div>
78   </div>
79 </div>
80 
81 <div class="message-wrapper">
82   <div class="message">
83     <h2>さぁ、あなたもPeogateでプログラミングを学んでみませんか？</h2>
84     <p>Let's Start to code,learn to be creative!</p>
85     <a class="btn" href="">さっそく開発する</a>
86   </div>
87 </div>
88 
89 <div class="footer-wrapper">
90  <div class="footer">
91 <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
92 <p>Learn to Cpde, Learn to be Creative!</p>
93  </div>
94</div>   
95
96</body>
97</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16a {
17  text-decoration: none;
18}
19
20/* ここからCSSを書いていきましょう */
21.header-wrapper { 
22  background: rgba(34,39,52,0.9);
23  height:65px;
24  position: fixed;
25  z-index: 10;
26  width:100%;
27}
28
29header {
30  width: 1170px;
31  height: 65px;
32  margin:0 auto;
33  display: flex;
34  justify-content: space-between;
35}
36
37header img {
38  width: 124px;
39  margin: 20px;
40}
41
42header a {
43  color:white;
44  background:rgba(255,255,255,0.3);
45  display: inline-block;
46  line-height: 65px;
47  width: 100%;
48
49}
50
51header a:hover {
52  background:rgba(255,255,255,0.5);
53  transition: all 0.5s;
54}
55
56
57.wrapper {
58  background-image: url(https://prog-8.com/images/html/advanced/top.png) ;
59  background-size: cover;
60  color: white;
61  text-align:center;
62  padding: 150px 0 110px 0;
63  
64}
65
66.container h1 {
67  font-size: 44px;
68  letter-spacing: 7px;
69  opacity: 0.7;
70}
71.container p {
72  opacity:0.7;
73}
74
75.top-message {
76  padding-top:30px ;
77}
78
79.btn-wrapper a {
80  color:white;
81  opacity: 0.7;
82  display:inline-block;
83  border-radius:4px;
84  width:170px; 
85  line-height: 38px; 
86  text-align:center;
87}
88
89.btn-wrapper a:hover {
90  opacity:1;
91}
92
93.btn-wrapper {
94  padding: 50px 0 30px 0;
95}
96
97.new {
98  background: #239B76;
99  
100}
101.facebook {
102  background: #35538A;
103  margin-right: 10px;
104}
105.twitter {
106  background: #4A99D1;
107}
108.btn-wrapper p {
109  padding: 15px 0;
110}
111
112.btn-wrapper span {
113  padding-right: 5px;
114}
115
116
117.lesson-wrapper {
118  text-align:center;
119  height:580px;
120  background: #f7f7f7;
121}
122
123.lesson-wrapper h2 {
124  padding:80px 0 50px;
125  letter-spacing: 1px;
126  font-weight: normal;
127  color: #5f5d60;
128}
129
130.lessons {
131  display:flex;
132  justify-content: space-around;
133  
134}
135
136.lesson {
137  width: 20%;
138  
139}
140
141.icon  {
142  position:relative;
143}
144
145.icon p {
146  color: white;
147  position:absolute;
148  top: 90px;
149  width: 100%;
150 
151}
152
153.text {
154  padding: 20px;
155  color: #b3aeb5;
156}
157
158.message-wrapper {
159  padding: 80px 0 50px 0 ;
160  text-align:center;
161  color: #5f5d60;
162  font-weight: normal;
163  border-bottom: 1px solid #eee;
164}
165
166.message a {
167  display:inline-block;
168  margin: 45px;
169  background: #5dca88;
170  opacity: 0.8;
171  padding: 15px 40px;
172  border-radius: 4px;
173  color: white;
174  box-shadow: 0 8px #1a7940;
175  
176}
177
178.message a:hover {
179  opacity: 0.9;
180  
181}
182
183.message a:active {
184  box-shadow: none;
185  position: relative;
186  top: 8px;
187}
188
189.footer { 
190  padding: 30px 0;
191  width: 1170px;
192  margin: 0 auto; 
193}
194
195.footer p {
196  font-size: 12px;
197  color: #b3aeb5;
198}
199
200.footer img {
201  width: 124px;
202}

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

回答1件

ベストアンサー

原因は1箇所だけではなさそうです。
一番大きいのは以下です。

CSS
1.footer { 
2  padding: 30px 0;
3  width: 1170px; /* これのせい */
4  max-width: 100%; /* こちらをを追加 */
5  margin: 0 auto; 
6}

追記: こちらも追加すると良さそうです。

CSS
1.icon img {
2  max-width: 100%;
3}
4.icon p {
5  /* ほかの内容を省略しますが、topを修正すると文字が上下中央配置になります。 */
6  /* top: 90px; */
7  top: calc(50% - 1em);
8}

投稿2020/04/22 07:47

編集2020/04/22 07:53

new1ro

総合スコア4528

dorachan1293

2020/04/22 08:14

いつもありがとうございます！できました！が、原理が良く分かっていません… 要素が飛び出てしまうときはmax-width: 100%;を使えばよい、ということでしょうか？？

new1ro

2020/04/22 08:19

要素がbodyのサイズより大きくなると、横スクロールが発生します。親要素のサイズを上回らないようにするのが「max-width: 100%;」です。 max-widthは横幅の上限を指定するCSSプロパティです。「max-width」はかなりメジャーなCSSプロパティなので、 Google 検索するとわかりやすい解説記事がたくさん見つけられると思います。

dorachan1293

2020/04/22 08:22

わかりました！そのあたりを中心に勉強してみます(^^) 迅速なご対応いつもありがとうございます！！

new1ro

2020/04/22 08:26

ありがとうございます！

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