Progate HTML&CSS　道場コース　中級編　で右側に記述していないmarginが入ってしまいます。

Part.3のレッスン部分を作ろうで各プログラミング言語の説明文を表示するのですが、

margin-top:15px;

と記述しているのに右側にmarginが適用されてしまいます。

chromeの検証で確認するとmarginの判定で15px*2個分の余白が設定されていました。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" 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
10</head>
11<body>
12  <!-- ここにコードを書いていきましょう -->
13  <div class="header">
14    <div class="container">
15    <div class="header-left">
16      <img src="https://prog-8.com/images/html/advanced/main_logo.png" class="logo">
17    </div>
18    <div class="header-right">
19      <a href="#" class="login">ログイン</a>
20    </div>
21    </div>
22  </div>
23  <div class="top-wrapper">
24    <div class="container">
25      <h1>LEARN TO CODE.</h1>
26      <h1>LEARN TO BE CREATIVE.</h1>
27      <p>Progateはオンラインプログラミング学習サービスです。</p>
28      <p>初心者にも優しいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
29      <a href="#" class="btn signup">新規登録はこちら</a>
30      <p>or</p>
31      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
32      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
33    </div>
34  </div>
35    <div class="lesson-wrapper">
36    <div class="container">
37      <div class="heading">
38        <h2>Learn Where to Get Started!</h2>
39      </div>
40      <div class="lessons">
41        <div class="lesson">
42          <div class="lesson-icon">
43            <img src="https://prog-8.com/images/html/advanced/html.png" class="icon">
44            <p>HTML & CSS</p>
45          </div>
46          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
47        </div>
48        <div class="lesson">
49          <div class="lesson-icon">
50            <img src="https://prog-8.com/images/html/advanced/jQuery.png" class="icon">
51            <p>jQuery</p>
52          </div>
53          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
54        </div>
55        <div class="lesson">
56          <div class="lesson-icon">
57            <img src="https://prog-8.com/images/html/advanced/ruby.png" class="icon">
58            <p>Ruby</p>
59          </div>
60          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
61        </div>
62        <div class="lesson">
63          <div class="lesson-icon">
64            <img src="https://prog-8.com/images/html/advanced/php.png" class="icon">
65            <p>PHP</p>
66          </div>
67          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
68        </div>
69      </div>
70    </div>
71  </div>
72
73  
74</body>
75</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22.top-wrapper{
23  background-image:url(https://prog-8.com/images/html/advanced/top.png);
24  padding:180px 0 100px 0;
25  background-size:cover;
26  text-align:center;
27}
28
29.container{
30  width:1170px;
31  margin:0 auto;
32}
33
34h1{
35  font-size:45px;
36  font-weight:bold;
37  letter-spacing:5px;
38  color:white;
39  opacity:0.7;
40}
41
42p{
43  color:white;
44  opacity:0.7;
45}
46
47.btn{
48  display:inline-block;
49  padding:8px 24px;
50  color:white;
51}
52
53.signup{
54  background-color:#239b76;
55  margin-top:30px;
56  margin-bottom:15px;
57  opacity:0.8;
58}
59
60.facebook{
61  background-color:#3b5998;
62  margin-top:15px;
63  margin-right:10px;
64  opacity:0.8;
65}
66
67.twitter{
68  background-color:#55acee;
69  opacity:0.8;
70}
71
72.header{
73  background-color:rgba(34,49,52,0.9);
74  height:65px;
75  width:100%;
76  position:fixed;
77}
78
79.header-left{
80  float:left;
81}
82.logo{
83  width:124px;
84  margin-top:20px;
85}
86
87.header-right{
88 float:right; 
89}
90
91.login{
92  display:block;
93  color:white;
94  background-color:rgba(255,255,255,0.3);
95  padding:0 25px;
96  line-height:65px;
97  
98}
99
100.lesson-wrapper{
101  text-align:center;
102  background-color:#f7f7f7;
103  height:580px;
104}
105
106h2{
107  font-weight:normal;
108  padding-top:80px;
109  margin-bottom:50px;
110  color:#5f5d60;
111}
112
113.lesson{
114  float:left;
115  width:25%;
116}
117
118.lesson-icon{
119  position:relative;
120}
121
122.lesson-icon p{
123  position:absolute;
124  top:44%;
125  width:100%;
126  color:white;
127}
128
129.text-contents{
130  margin:15px 0 0 0 ;
131  color:#b3aeb5;
132  width:80%;
133  font-size:13px;
134}

m.ts10806

2019/08/23 06:10

この手の質問結構出てそうに思いますが、参考になるものはありませんでしたか？ https://teratail.com/search?q=Progate+tag%3ACSS

azuapricot

2019/08/23 06:34

margin が適用されちゃうっていうよりは、中央寄せできてないように見えますね padding-left:10%; 入れたら中央寄せっぽくなりましたけど・・・ｳｰﾝ

fukutaro29

2019/08/23 06:46

teratail内のアーカイブには残念ながらありませんでした。見本のソースを見ながら作成していて、marginの部分をコピペしても直りませんでした。 text-align:center;やmargin:0 auto;も試しましたがやはり崩れてしまい苦戦中です、、、

azuapricot

2019/08/23 06:53

見本の .lesson .lesson-icon .lesson-icon p .text-contents あたりのCSSとは全く一緒になってるってことでしょうか

Lhankor_Mhy

2019/08/23 06:53

ご提示のコードを試してみましたが、marginが原因ではないですよ。 .text-contents{ width:80%; } となっているので、右側に20%の余白が残っているだけだと思います。

mix-peach

2019/08/23 07:20

Lhankor_Mhy さんが仰っている通り、20％の余白が見えているだけかと思います。検証に出ているMarginも「15px 0px 0px」は、「上15px 左右0px 下0px」なので、chromeもちゃんとtopだけmarginが設定されていると解釈していますし。 pはdisplay:blockなので、幅指定だけじゃ意味ないのかなと。。。 .text-contentsに、display:inline-block;とか、足したりするといい感じになりそうでしたが・・？