なぜかsection1の中にsection2・3が入り込んでしまう

section1のpaddingを設定しようとしたところ、なぜかsection2・3も含めてpaddingが設定されてしまいます。
floatが原因かと思い、section1にoverflow:hidden;をかけましたが、効果なしでした。
原因・対策をご教示いただきますようお願いいたします。

また、こちらのHTML・CSSにて別途おかしな点ございしたら、ご指摘いただけますと幸いです。

html
1<body>
2  <div class="container">
3    <header class="header">
4      <div class="h-top inr">
5        <img src="img/logo.png" alt="" class="h-t-logo">
6        <ul class="h-t-ul">
7          <li class="h-t-li">Cat1</li>
8          <li class="h-t-li">Cat2</li>
9          <li class="h-t-li">Cat3</li>
10        </ul>
11      </div>
12      <div class="h-mainImage">
13        <img src="img/logo-mv.png" alt="" class="h-m-logo">
14      </div>
15      <div class="h-bottom inr">
16        <div class="h-b-box">
17          <h2 class="h-b-h2">
18            吾輩は猫である。名前はまだ無い。
19          </h2>
20          <p class="h-b-p">
21            どこで生れたかとんと見当がつかぬ。<br>
22            何でも薄暗いじめじめした所で<br>
23            ニャーニャー泣いていた事だけは記憶している。
24          </p>
25          <p class="h-b-p">
26            吾輩はここで始めて人間というものを見た。<br>
27            しかもあとで聞くとそれは書生という人間中で<br>
28            一番獰悪な種族であったそうだ。
29          </p>
30          <p class="h-b-p">
31            この書生というのは時々我々をつかまえて<br>
32            煮て食うという話である。
33          </p>
34        </div>
35      </div>
36    </header>
37    <main class="main">
38      <section class="m-section1">
39        <h2 class="m-h2">CAT1</h2>
40        <div class="m-box inr">
41          <img src="img/cat1-1.jpg" alt="" class="m-b-image">
42          <div class="m-b-textbox">
43            <div class="m-b-top">
44              吾輩は猫である。名前はまだ無い。
45            </div>
46            <div class="m-b-bottom">
47              然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。
48            </div>
49          </div>
50        </div>
51        <div class="m-box inr">
52          <img src="img/cat1-2.jpg" alt="" class="m-b-Rimage">
53          <div class="m-b-Ltextbox">
54            <div class="m-b-top">
55              吾輩は猫である。名前はまだ無い。
56            </div>
57            <div class="m-b-bottom">
58              但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顔を見たのが所謂人間といふものゝ見始であらう。
59            </div>
60          </div>
61        </div>
62        <div class="m-box inr">
63          <img src="img/cat1-3.jpg" alt="" class="m-b-image">
64          <div class="m-b-textbox">
65            <div class="m-b-top">
66              吾輩は猫である。名前はまだ無い。
67            </div>
68            <div class="m-b-bottom">
69              此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顔の眞中が餘りに突起して居る。
70            </div>
71          </div>
72        </div>
73      </section1>
74      <section class="m-section2">
75        <h2 class="m-h2">CAT2</h2>
76        <div class="m-s2-boxs inr">
77          <div class="m-s2-box">
78            <img class="m-s2-img" src="img/cat2-1.png" alt="">
79            <div class="m-s2-info">
80              そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。
81            </div>
82          </div>
83          <div class="m-s2-box m-img-center">
84            <img class="m-s2-img" src="img/cat2-2.png" alt="">
85            <div class="m-s2-info">
86              是が人間の飲む烟草といふものである事 は漸く此頃知つた。
87            </div>
88          </div>
89          <div class="m-s2-box inr">
90            <img class="m-s2-img" src="img/cat2-3.png" alt="">
91            <div class="m-s2-info">
92              此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。
93            </div>
94          </div>
95        </div>
96        <div class="m-s2-mainImage">
97          <div class="m-s2-textbox">
98            <p class="m-s2-p">
99              そうして其穴の中から時々ぷうぷうと烟を吹く。<br>
100              どうも咽せぽくて實に弱つた。<br>
101              是が人間の飲む烟草といふものである事は漸く此頃知つた。
102            </p>
103            <p class="m-s2-p">
104              此書生の掌の裏でしばらくはよい心持に坐つて居つたが、<br>
105              暫くすると非常な速力で運轉し始めた。<br>
106              書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。　
107            </p>
108          </div>
109        </div>
110      </section>
111      <section class="m-section3">
112        <h2 class="m-h2">CAT3</h2>
113        <ul class="m-s3-ul inr">
114          <li class="m-s3-li">
115            <p class="s3-li-p">2018.02.09<span class="s3-li-p-red">新着</span>縁は不思議なもので、もし此竹垣が破れて居なかつたなら、</p>
116          </li>
117          <li class="m-s3-li">
118            <p class="s3-li-p">2018.02.09<span class="s3-li-p-red">新着</span>吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。</p>
119          </li>
120          <li class="m-s3-li">
121            <p class="s3-li-p">2018.02.09<span class="s3-li-p-red">新着</span>此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。</p>
122          </li>
123          <li class="m-s3-li">
124            <p class="s3-li-p">2018.02.09<span class="s3-li-p-red">新着</span>偖邸へは忍び込んだものゝ是から先どうして善いか分らない。其内に暗くなる、腹は減る、</p>
125          </li>
126          <li class="m-s3-li">
127            <p class="s3-li-p">2018.02.09<span class="s3-li-p-red">新着</span>寒さは寒し、雨が降つて來るといふ始末でもう一刻も猶豫が出來なくなつた。</p>
128          </li>
129        </ul>
130        <div class="m-s3-more btn"><a href="">MORE</a></div>
131      </section>
132    </main>
133    <footer class="footer">
134      <div class="f-top">
135        <div class="f-t-boxs inr">
136          <div class="f-t-box">
137            <div class="t-b-title">主人は餘り口を聞かぬ人と見えた。</div>
138            <ul class="t-b-ul">
139              <li class="t-b-li">・下女は口惜しさうに</li>
140              <li class="t-b-li">・吾輩を臺所へ抛り出した。</li>
141              <li class="t-b-li">・かくして吾輩は遂に此家を</li>
142              <li class="t-b-li">・自分の住家と</li>
143              <li class="t-b-li">・極める事にしたのである。</li>
144            </ul>
145          </div>
146          <div class="f-t-box">
147            <div class="t-b-title">主人は餘り口を聞かぬ人と見えた。</div>
148            <ul class="t-b-ul">
149              <li class="t-b-li">・下女は口惜しさうに</li>
150              <li class="t-b-li">・吾輩を臺所へ抛り出した。</li>
151              <li class="t-b-li">・かくして吾輩は遂に此家を</li>
152              <li class="t-b-li">・自分の住家と</li>
153              <li class="t-b-li">・極める事にしたのである。</li>
154            </ul>
155          </div>
156          <div class="f-t-box">
157            <div class="t-b-title">主人は餘り口を聞かぬ人と見えた。</div>
158            <ul class="t-b-ul">
159              <li class="t-b-li">・下女は口惜しさうに</li>
160              <li class="t-b-li">・吾輩を臺所へ抛り出した。</li>
161              <li class="t-b-li">・かくして吾輩は遂に此家を</li>
162              <li class="t-b-li">・自分の住家と</li>
163              <li class="t-b-li">・極める事にしたのである。</li>
164            </ul>
165          </div>
166        </div>
167      </div>
168      <div class="f-bottom">
169        Copyright 2019 saigomadeganbatta.
170      </div>
171    </footer>
172  </div>
173</body>

css
1.container {
2  max-width: 1280px;
3  margin: 0 auto;
4}
5
6.inr {
7  max-width: 980px;
8  margin: 0 auto;
9}
10
11.h-top {
12  height: 40px;
13  overflow: hidden;
14  padding: 10px;
15}
16
17.h-t-logo {
18  width: 100px;
19  float: left;
20}
21
22.h-t-ul {
23  text-align: center;
24  float: right;
25}
26
27.h-t-li {
28  float: left;
29  padding: 10px;
30}
31
32.h-mainImage {
33  max-width: 1280px;
34  background-image: url(img/mv.jpg);
35  background-size: cover;
36  height: 600px; 
37  position: relative;
38}
39
40.h-m-logo {
41  width: 220px;
42  height: auto;
43  position: absolute;
44  top: 50%;
45  left: 50%;
46  transform: translate(-50%, -50%);
47}
48
49.h-b-box {
50  text-align: center;
51  padding: 70px 0 20px;
52  letter-spacing: 1.5px;
53}
54
55.h-b-h2 {
56  padding-bottom: 50px;
57  font-size: 20px;
58  font-weight: bold;
59}
60
61.h-b-p {
62  line-height: 1.5;
63  padding-bottom: 30px;
64}
65
66.main {
67  width: 100%;
68}
69
70.m-section1 {
71  background:#EEEEEE;
72  padding: 50px;
73  overflow:hidden;
74}
75
76.m-h2 {
77  text-align: center;
78  font-size: 40px;
79  font-weight: bold;
80  padding: 40px 0 60px;
81}
82
83.m-box {
84  line-height: 2;
85  font-size: 14px;
86  overflow: hidden;
87  padding-bottom: 80px;
88}
89
90.m-b-image {
91 width: 47%;
92 float: left;
93}
94
95.m-b-textbox {
96  float: right;
97  width: 48%;
98}
99
100.m-b-top {
101  border-bottom: 2px solid red;
102  margin: 10px 0 30px;
103  font-size: 26px;
104  font-weight: bold;
105  letter-spacing: 2px;
106}
107
108.m-b-bottom {
109  letter-spacing: 1.5px;
110  font-size: 18px;
111}
112
113.m-b-Rimage {
114  width: 47%;
115  float: right;
116}
117
118.m-b-Ltextbox {
119  float: left;
120  width: 48%;
121}
122
123.m-section2 {
124  clear: both;
125  overflow: hidden;
126  background: white;
127  box-sizing: border-box;
128  clear: both;
129}
130
131.m-s2-h2 {
132  text-align: center;
133  font-size: 40px;
134}
135
136.m-s2-box {
137  float: left;
138  width: 300px;
139}
140
141.m-s2-img {
142  padding-bottom: 20px;
143  width: 300px;
144}
145
146.m-s2-info {
147  line-height: 2;
148}
149
150.m-img-center {
151  padding: 0 30px;
152}
153
154.m-s2-mainImage {
155  clear: both;
156  background-image: url(img/bg.jpg);
157  background-size: cover;
158  height: 510px;
159  position: relative;
160}
161
162.m-s2-textbox {
163  position: absolute;
164  top: 50%;
165  left: 50%;
166  transform: translate(-5%, -50%);
167}
168
169.m-s2-p {
170  color: white;
171  line-height: 2;
172  margin-bottom: 40px;
173}
174
175.m-section3 {
176  background: white;
177  padding: 110px 0;
178}
179
180.m-s3-ul {
181  border-top: 1px solid black;
182  line-height: 2;
183  margin-bottom: 65px;
184}
185
186.m-s3-li {
187  padding: 10px;
188  border-bottom: 1px solid black;
189}
190
191
192.s3-li-p-red {
193  border: 1px solid red;
194  padding: 5px 19px;
195  color: red;
196  margin: 0 30px 0 15px;
197}
198
199.m-s3-more {
200  text-align: center;
201}
202
203.m-s3-more a {
204  padding: 10px 30px;
205  background: red;
206  color: white;
207  text-decoration: none;
208  border-radius: 10px;
209  position: relative;
210  display: inline-block;
211  border-bottom: 2px solid black;
212}
213
214.btn a:active{
215  transform: translateY(4px);
216  border-bottom: none;
217}
218
219.footer {
220  color: white;
221}
222
223.f-t-boxs {
224  padding: 50px 0;
225  overflow: hidden;
226}
227
228.f-t-box {
229  overflow: hidden;
230  width: 300px;
231  float: left;
232  padding-right: 20px;
233  line-height: 2;
234}
235
236.f-top {
237  background: #AFAFAF;
238}
239
240.t-b-title {
241  border-bottom: 1px solid white;
242  margin-bottom: 30px;
243}
244
245.f-bottom {
246  background: gray;
247  text-align: center;
248  padding: 20px;
249  font-size: 14px;
250}

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

回答2件

html 73行目

html
1      </section1>

閉じタグぅー

投稿2020/05/17 03:46

hope_mucci

総合スコア4447

ベストアンサー

diff
1            <div class="m-b-bottom">
2              此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顔の眞中が餘りに突起して居る。
3            </div>
4          </div>
5        </div>
6-      </section1>
7+      </section>
8      <section class="m-section2">
9        <h2 class="m-h2">CAT2</h2>
10        <div class="m-s2-boxs inr">
11          <div class="m-s2-box">
12            <img class="m-s2-img" src="img/cat2-1.png" alt="">
13            <div class="m-s2-info">
14              そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。
15            </div>