まとめてスタイルを適用しているが一部にだけ適用されない

前提・実現したいこと

h1タグにまとめて同じスタイルを適用させたいです。

発生している問題

一つ目のｈ1には適用されますが2つ目のｈ1には適用されません。

該当のソースコード

HTML
1		<div class="pick">
2			<h1 class="section-title">PICK UP</h1>
3			<div class="main6"></div>
4			<div class="main7"></div>
5		</div>
6		<div class="products">
7			<h1 class="section-title">PRODUCT</h1>
8			<div class="product-wrapper">
9				<ul>
10					<li class="product1"><p class="product-title1">text</p></li>
11					<li class="product2"><p class="product-title2">text</p></li>
12					<li class="product1"><p class="product-title1">text</p></li>
13					<li class="product2"><p class="product-title2">text</p></li>
14				</ul>
15			</div>
16		</div>

CSS
1.pick {
2	width: 900px;
3}
4
5.main6 {
6	width: 430px;
7	height: 100px;
8	border: 1px solid gray;
9	float: left;
10	margin-top: 20px;
11}
12
13.main7 {
14	width: 430px;
15	height: 100px;
16	border: 1px solid gray;
17	float: right;
18	margin-top: 20px;
19}
20
21.products{
22	width: 900px;
23}
24
25.products{
26	width: 900px;
27	
28}
29
30
31.product-wrapper ul {
32	text-align: center;
33}
34
35
36.product1 {
37	width: 350px;
38	height: 80px;
39	background-color: #938686;
40	border: 1px solid gray;
41	color: #fff;
42	line-height: 80px;
43	font-weight: 100;
44	display: inline-block;
45	margin-bottom: 20px;
46	position: relative;
47}
48
49
50.product2 {
51	width: 350px;
52	height: 80px;
53	background-color: #938686;
54	border: 1px solid gray;
55	color: #fff;
56	line-height: 80px;
57	margin-left: 20px;
58	font-weight: 100;
59	display: inline-block;
60	margin-bottom: 20px;
61	position: relative;
62}
63
64.product-title1, .product-title2 {
65	position: absolute;
66	top: 2%;
67	left: 10%;
68}
69
70
71.section-title {
72	color: gray;
73	font-weight: 100;
74	text-align: center;
75	margin-top: 70px;
76	font-size: 25px;	
77}
78

試したこと

初めにh1だけだからダメなのかなと思いclass="section-title"にしてみたのですが
適用されませんでした。
分かる方いらっしゃいましたらご教授お願いします。

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

回答3件

ベストアンサー

状況再現できません
試しにcolorをredしましたが、両方redになりました。

他のCSSが影響しているのでは？

投稿2019/08/01 02:18

m.ts10806

総合スコア80850

kana0701

2019/08/01 02:44

以前もご回答ありがとうございました！おそらくmargin-top: 70px;が適用されていないようです。他のCSSが影響しているのでは？とのことで <div class="products">内のなにかが影響されているのかと思い確認したのですが、 <div class="products">にはこれといって原因になりそうなところを見つけることができませんでした。該当のソースコードの所に追加で記入と現在の状況を画像でアップしましたのでもしよろしければご確認いただきたいです。よろしくお願いします。

m.ts10806

2019/08/01 02:49

ああ・・そこは初めに書いておいてもらいたいですね。「何も効かない」のか「何かが効いていない」かでは全く状況が違いますので。ただ、私が提示した画像の右側見てもらうと分かると思いますが、 margin-topに取り消し線が入っていないので無効になっているわけではなく、色々と影響しあって効いてないように「見える」だけだと思います。コードも更新されたようなので再度見てみます

kana0701

2019/08/01 02:54

申し訳ございません。ありがとうございます、よろしくお願いします！

m.ts10806

2019/08/01 02:56

floatが効いてるだけですね。回り込み解除を適宜入れてください。

kana0701

2019/08/01 03:09

解決できました！そういう細かいところに気づけるようにもっと頑張りたいと思います！ありがとうございました！！

m.ts10806

2019/08/01 03:16

デベロッパーツールで確認するようにすると問題切り分けが進むと思います。 ※コメント投稿したあとに気づきましたがkei344さんがより望ましい案を出してくれてますね