css paddingが消えない

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title><%= title %></title>
6        <!-- font awesome読み込み-->
7        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
8        <!-- css読み込み-->
9        <link rel="stylesheet" type="text/css" href='/stylesheets/style.css'>
10    </head>
11    <body>
12        <header>
13            <div class="container">
14                <div class="header-left">
15                    <img class="logo" src="/images/IMG_1035.jpeg"> 
16                    <div class="company">WAMNET <span class="Japan">Japan</span></div>
17                </div>
18                <span class="fa fa-bars header-fa"></span>
19                <div class="header-right">
20                    <a href="#" class="menu-botton header-side">TOP</a>
21                    <a href="#" class="menu-botton header-side">日本ワムネットについて</a>
22                    <a href="#" class="menu-botton header-side">社長メッセージ</a>
23                    <a href="#" class="menu-botton header-side">製品・サービス</a>
24                    <a href="#" class="menu-botton header-side">社員紹介</a>
25                    <a href="#" class="menu-botton header-side">制度紹介</a>
26                    <a href="#" class="menu-botton header-side">募集要項</a>
27                    <a href="#" class="menu-botton header-side">会社概要</a>
28                    <div class="entry header-side">
29                        <span class="fa fa-edit"></span>
30                        <a href="#" class="menu-botton">ENTRY</a>
31                    </div>
32                    <div class="clear"></div>
33                </div>
34                <div class="clear"></div>
35            </div>
36        </header>
37        <div class="top-wrapper">
38            <div class="container">
39                <div class="center">
40                    <div class="top-line">
41                        <div class="think">THIN<span>K.</span></div>
42                        <img class="new-picture" src="/images/l_e_new_221.png">
43                        <div class="line">__</div>
44                        <img class="light-picture" src="/images/light-bulb.png">
45                    </div>
46                    <div class="sub-title">あなたの、<span>”やりたい”</span>が、社会の便利に。</div>
47                    <i class="fa fa-angle-double-down" aria-hidden="true"></i>
48                </div>
49            </div>
50        </div>
51        <div class="second">
52            <div class="top-row">
53                <div class="company-about">日本ワムネットについて</div>
54                <div class="about"><span>A</span><span>b</span><span>o</span><span>u</span><span>t</span></div>
55            </div>
56            <div class="second-row">
57                <div class="six-point-about">日本ワムネットの6つのポイント</div>
58                <div class="six-point">
59                    <div class="point">
60                        <div class="point-title">１０年連続増収益</div>
61                        <img src="/images/icon_point_04.png">
62                        <div class="description">クラウドサービスを中心に顧客</div>
63　　　　　　　　　　　　</div>
64                </div>
65            </div>
66        </div>
67
68        <div class="form">
69            <p class="secondhand-dealer-form">登録フォーム</p>
70            <form method="post" action="/form/post">
71                <div class="wrapper">
72                    <div class="item">
73                        <p>お名前 <span class="must">必須</span><br><input type="text" name="userName"></p>
74                    </div>
75                </div>
76                <div class="wrapper">
77                    <div class="item">
78                        <p>フリガナ <span class="must">必須</span><br><input type="text" name="kana"></p>
79                    </div>
80                </div>
81                <div class="wrapper">
82                    <div class="item">
83                        <p>会社名<br><input type="text" name="companyname"></input></p>
84                    </div>
85                </div>
86                <div class="wrapper">
87                    <div class="item">
88                        <p>メールアドレス <span class="must">必須</span><br><input type="email" name="mail"></p>
89                    </div>
90                </div>
91                <p><input type="submit" value="送信"></p>
92            </form>
93        </div>
94
95    </body>
96</html>

このコードの、class="form"をcssで形を整えたいのですが、

css
1body {
2  margin: 0;
3}
4
5.container {
6  max-width: 1300px;
7  width: 100%;
8  margin: 0 auto;
9  padding-top: 30px;
10  text-align: center;
11}
12
13header {
14  height: 85px;
15  width: 100%;
16  position: fixed;
17  top: 0;
18  z-index: 10;
19}
20
21.header-left {
22  float: left;
23  width: 290px;
24}
25
26.logo {
27  width: 34px;
28  float: left;
29  padding-left: 10px;
30  padding-right: 5px;
31}
32
33.company {
34  font-weight: normal;
35  font-size: 28px;
36  font-family: "YuGothic";
37  letter-spacing: 0.5px;
38  color: white;
39}
40
41.Japan {
42  letter-spacing: 5px;
43}
44
45.header-fa  {
46  float: right;
47  padding-top: 8px;
48  display: none;
49}
50
51.header-right {
52  display: block;
53  float: right;
54  padding-right: 10px;
55}
56
57.menu-botton {
58  color: white;
59  font-weight: bold;
60  letter-spacing: px;
61}
62
63.entry .menu-botton {
64  color: black;
65}
66
67.header-side {
68  float: left;
69  padding: 20px 16px;
70  font-size: 13px;
71  margin-top: -5px;
72}
73
74.entry {
75  background-color: white;
76  border-radius: 3px;
77  margin: 0px 0;
78  padding: 16px 30px;
79  margin-left: 5px;
80}
81
82.entry .fa {
83  padding-right: 3px;
84}
85
86.clear {
87  clear: both;
88}
89
90.top-wrapper {
91  height: 789px;
92  background-color: rgba(31, 109, 79, 0.4);
93}
94
95.center {
96  margin-top: 220px;
97}
98
99.top-line {
100  display: flex;
101  justify-content: center;
102}
103
104.think {
105  color: rgba(65, 35, 8, 0.65);
106  letter-spacing: 6px;
107  font-size: 70px;
108  padding-top: 100px;
109  padding-right: 10px;
110}
111
112.center .top-line span {
113  letter-spacing: -3px;
114}
115
116.new-picture {
117  padding-top: 60px;
118  padding-left: 15px;
119  width: 140px;
120  height: 120px;
121  opacity: 0.8;
122  transform: rotate(10deg);
123}
124
125.line {
126  color: rgba(65, 35, 8, 0.65);
127  font-size: 60px;
128  font-weight: bold;
129  padding-top: 103px;
130}
131
132.light-picture {
133  width: 130px;
134  height: 135px;
135  opacity: 0.9;
136  padding-top: 30px;
137  transform: rotate(-14deg);
138}
139
140.sub-title {
141  color: rgba(46, 24, 7, 0.65);
142  font-weight: bolder;
143  font-size: 18px;
144  font-family: "YuGothic";
145  padding-top: 10px;
146  letter-spacing: 3.5px;
147}
148
149.sub-title span {
150  letter-spacing: 6px;
151}
152
153.top-wrapper i {
154  font-size: 30px;
155  color: rgba(46, 24, 7, 0.65);
156  padding-top: 220px;
157}
158
159.second {
160  font-family: Courier;
161  font-weight: lighter;
162  max-width: 1500px;
163  width: 100%;
164  margin: 0 auto;
165  text-align: center;
166}
167
168.top-row {
169  position: relative;
170}
171
172.company-about {
173  font-size: 30px;
174  font-family: "YuGothic";
175  padding-top: 100px;
176  padding-bottom: 90px;
177  opacity: 0.7;
178  position: relative;
179}
180
181.company-about::before {
182  content: "";
183  border-bottom: 3px solid #000;
184  width: 30px;
185  padding-top: 48px;
186  left: 0;
187  right: 0;
188  margin: 0 auto;
189  position: absolute;
190}
191
192.about {
193  font-size: 210px;
194  opacity: 0.04;
195  position: absolute;
196  top: -40px;
197  right: 23px;
198  letter-spacing: 9px;
199}
200
201.second .top-row .about span {
202  font-family: cursive;
203  display: block;
204  transform: rotate(7deg);
205  float: left;
206}
207
208.second-row {
209  background-color: rgb(248,248,248);
210  height: 800px;
211  padding-top: 80px;
212  padding-bottom: 0px;
213  padding-right: 5%;
214  padding-left: 5%; 
215}
216
217.six-point-about {
218  padding-bottom: 35px;
219  opacity: 0.65;
220  font-size: 20px;
221}
222
223.six-point {
224  display: flex;
225  flex-wrap: wrap;
226  align-content: space-around;
227  justify-content: center; 
228}
229
230.point {
231  width: 270px;
232  height: 230px;
233  background-color: white;
234  padding: 40px 20px 40px 20px;
235  margin: 13px;
236}
237
238.point-title {
239  font-size: 18px;
240  padding-bottom: 20px;
241  opacity: 0.75;
242}
243
244.point img {
245  width: 75px;
246}
247
248.description {
249  font-size: 15px;
250  font-family: "MS ゴシック";
251  padding-top: 25px;
252  opacity: 0.8;
253}
254
255.form {
256  width: 100%;
257  height: 1000px;
258  background-color: #444;
259}
260
261.secondhand-dealer-form {
262  background-color: #022;
263}

このcssの.second-rowのpaddingがclass="form"のところでも効いていて、困ってます。
無くしたいです。

kuraudo

2020/01/30 07:08 編集

出来ればですが自分でどこまでのことを試してみたのかもあると回答がしやすいです。例えば、.second_rowのpaddingが影響してしまう事が分かっているので自分でやってみたこととして.second_rowのpaddingを外して代わりに内部でmarginを使うようにしてみたなど。

thyda.eiqau

2020/01/30 07:09

class="form" の要素はどこにあるのですか？

chacopipi

2020/01/30 07:12

marginにしてしまうと、.seconde_rowのbackground-colorが崩れてしまうのでmarginには出来ないです。 .second-rowにheightを追加しましたが、やはりformにも効いてしまうようで、、、

chacopipi

2020/01/30 07:14

すみません！クラス名を変えて試していたので、そのままでした！ formに直しました。

kuraudo

2020/01/30 07:14

なるほどなるほどありがとうございます後ほど詳しく見ときます

kuraudo

2020/01/30 07:15

お？笑 (解決したやつかな、、、?)

chacopipi

2020/01/30 07:17

名前を戻しただけで解決してないです泣

kuraudo

2020/01/30 07:18

早とちりしましたm(_ _)m

thyda.eiqau

2020/01/30 07:26 編集

div.second > div.second-row > div.six-point > div.point が閉じられていませんが、問題はmarginだけですか？追記: typoでした。marginじゃなくてpadding

x_x

2020/01/30 07:25

再現しません。 </div>が足りないので .point 付近を見直してみてください

chacopipi

2020/01/30 07:30

結構htmlは削ったので、打ち間違えがあったようです。直しました。よろしくお願いします。

thyda.eiqau

2020/01/30 07:33

修正いただいたコードをコピペしましたが、div.formにpaddingがつくという現象が再現しません。「.second-rowのpaddingがclass="form"のところでも効いて」いるというのはどうやって確認したのでしょうか。デベロッパーツールでinspectしたのであれば、該当するstyleが適用されていることがわかる画面のスクリーンショット等をご提示ください。

chacopipi

2020/01/30 07:48

先輩に見てくださって解決しました。ありがとうございますーーー！

kuraudo

2020/01/30 07:48 編集

自分の方でも現在確認いたしましたが thyda.eiqau さんのおっしゃる通り、こちらでも再現ができず特に影響ない状態で見れました。 Chromeなどのブラウザを使っているのであればデベロッパーツール(検証)で適応されているhtml, cssが簡単に見れるので試してみていただけると。 ( もしも使ったことがない場合はこちらとか参考になりそう https://ferret-plus.com/1880 )