cssの中央揃えができない

cssとsussを使いモバイルファーストでサイトの模写をしており、現在パソコン向けにメディアクエリを使って適応をさせている最中です。
下記の画像の一枚目が私が制作しているサイトで二枚目が本家の方のサイトです。
一枚目の画像(私が作っている方)ではimgと文章がずれてしまっています。
これを二枚目のようにすべてを画面の中央にきれいに持っていきたいです。
margin 0 auto などを試しましたがなぜかうまくいきません。
解決策を教えてください。よろしくお願い致します。
htmlとscssのコードを載せておきます。

html
1
2 <section class="explanation">
3        <div class="html-css">
4          <div>
5            <img src="photo/html.png" alt="html&css">
6            <p>HTML&CSS</p>
7          </div>
8          <p class="leson-font">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
9        </div>
10
11        <div class="jquery">
12          <div>
13            <img src="photo/jQuery.png" alt="jquery">
14            <p>jQuery</p>
15          </div>
16          <p class="leson-font">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
17        </div>
18
19        <div class="ruby">
20          <div>
21            <img src="photo/ruby.png" alt="ruby">
22            <p>Ruby</p>
23          </div>
24          <p class="leson-font">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
25        </div>
26
27        <div class="php">
28          <div>
29            <img src="photo/php.png" alt="php">
30            <p>PHP</p>
31          </div>
32          <p class="leson-font">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
33        </div>
34      </section>
35

css
1.explanation{
2     background-color:white;
3     padding-bottom: 150px;
4     @include pc{
5       display: flex;  
6       padding: 0 60px;    
7     }
8     div{
9       @include pc{
10         width: 25%;
11       }
12       
13     }
14     .leson-font{
15       font-size: 13px;
16       opacity: 0.5;
17       width: 80%;
18       text-align: center;
19       margin: 0 auto;
20       padding-bottom: 40px;
21     }
22     .html-css {
23       
24       
25       div{
26         position: relative;                         
27         img{
28           display: block;
29           margin: 0 auto; 
30           padding-bottom: 20px; 
31          
32          }
33          p{
34            color: white;
35            width: 100%;
36            text-align: center;
37            position: absolute;
38            top: 44%;
39            @include pc{
40              width: 200px;
41            }
42          }          
43        } 
44            
45      }
46      .jquery div{
47           position: relative;  
48                        
49         img{
50          display: block;
51          margin: 0 auto;
52          padding-bottom: 20px;                 
53          }
54          p{
55            color: white;
56            width: 100%;
57            text-align: center;
58            position: absolute;
59            top: 44%;
60            @include pc{
61              width: 200px;
62            }                    
63          }      
64        } 
65      .ruby div{
66           position: relative;                         
67         img{
68          display: block;
69          margin: 0 auto;  
70          padding-bottom: 20px;        
71          }
72          p{
73            color: white;
74            width: 100%;
75            text-align: center;
76            position: absolute;
77            top: 44%;  
78            @include pc{
79              width: 200px;
80            }          
81          }
82        
83        } 
84      .php div{
85           position: relative;       
86                             
87         img{
88          display: block;
89          margin: 0 auto;
90          padding-bottom: 20px;  
91          
92          }
93          p{
94            color: white;
95            width: 100%;
96            text-align: center;
97            position: absolute;
98            top: 44%;  
99            @include pc{
100              width: 200px;
101            }          
102          }
103        
104        } 
105    }

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

回答1件

ベストアンサー

.explanation div { width: 25%; }というように指定されていますが、子孫要素すべての横幅が親要素に対して25%となってしまっているので間違いです。
以下のようにしてください。
.explanation > div { width: 25%; }

以下のように書いてください。

CSS
1.explanation {
2  background-color:white;
3  padding-bottom: 150px;
4  
5  @include pc{
6    display: flex;  
7    padding: 0 60px;    
8  }
9
10  /* 以下のように修正 */
11  & > div　{
12    @include pc{
13      width: 25%;
14    }
15  }

投稿2020/05/18 13:10

new1ro

総合スコア4528

augsup

2020/05/18 14:25

ご回答ありがとうございます！ご指摘をいただいた通りに記述すると解決はしたのですがなぜこのような挙動になるのかが少しわかりません。子孫要素すべての横幅が２５％になっているとのことですがimgと文章のwidthは指摘された箇所の変更前と変更後で変わっていないように思えます、また変更前ではimgにつけたmargin 0 autoが効いていなかったのですが変更後だとmargin 0 auto が正常に効いているのはなぜでしょうか？同時に変更前でも文章の方のmargin 0 auto が効いているのはなぜでしょうか？お手数と思いますがもう少し詳しく教えていただけませんでしょうか？

new1ro

2020/05/18 22:47 編集

本件、「.explanation」から見て「横幅6.25%」となってしまっている要素が存在してしまっていることが問題です。divの子孫要素にdivがある場合、横幅が.explanationの25%の25% = 6.25%の横幅しかない要素が存在してしまうことになります。そのため .explanationの子孫要素のdivに「width: 25%」を指定するのではなく、 .explanationの子要素のdivだけに「width: 25%」を指定する必要があります。 <section class="explanation"> __<div class="html-css"> ____<div> ______<img src="photo/html.png" alt="html&css"> ______<p>HTML&CSS</p> ____</div> ____<p class="leson-font">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> __</div> __中略 </section> (コメントだとインデントが消えるので「__」を使っています。) .html-cssの子要素のdiv (.html-css > div) に背景色をつけると、イメージがしやすいと思います。 ---------------------------------------- > また変更前ではimgにつけたmargin 0 autoが効いていなかったのですが「効いていなかった」ではなく「効いているけど効いていないように見えた」が正解です。「margin: 0 auto;」は正常に働いているものの、別の箇所の問題によりそうは見えていない、という点をご理解ください。 ---------------------------------------- > 同時に変更前でも文章の方のmargin 0 auto が効いているのはなぜでしょうか？「div.html-css (width: 25%;)」の子要素には「div (width: 25%;)」がなく、「.explanation」から見て「横幅6.25%」となってしまう要素がないためです。

augsup

2020/05/19 05:02

丁寧な説明ありがとうございます！子孫要素の横幅が25%の25%つまり6.25%になっているせいで表示が崩れていたんですね！無事理解する事が出来ましたありがとうございます！！！！

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