HTMLとCSSで作ってるサイトに画像が4個中1つしか並びません...

サイトを作る勉強を始めて、練習として漫画サイトを作っています。
そのトップページに漫画の画像を左から順番に4つ並べたいのですが、なぜかひとつしか表示されません。

この一番左の画像を、２つ目に並ぶ進撃の巨人に変更するとしっかり表示され、２番目のワンピースが表示されなくなります。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="style.css">
7    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8  </head>
9  <body>
10  
11  <header>
12      <div class="container">
13          <div class="header-left">
14            <div class="logo">漫画.com</div>
15          </div>
16          <div class="header-right">
17              <a href="#" class="login">ログイン</a>
18          </div>
19      </div>
20      </header>
21      
22      
23 
24      
25      
26      
27      
28  <div class=top-img>
29      
30      <div class="container">
31          <h1> Let's read comics!</h1>
32          <h1> Let's enjoy comic life!</h1>
33          <p>マンガcomは定額で漫画が読み放題のサービスです。</p>
34          <p>あなたの好きなあの作品もきっと見つかるはず...</p>
35          <div class="btn-img">
36              <a href="#" class="btn signup">新規登録はこちら</a>
37              <p>以下のサービスで登録することもできます</p>
38              <a href="#" class="btn facebook">
39                  <span class="fa fa-facebook">Facebookで登録</span>
40              </a>
41              <a href="#" class="btn twitter">
42                   <span class="fa fa-twitter">Twitterで登録</span> 
43                  </a>
44          </div>
45      </div>
46      
47      
48      </div>
49      
50      
51      
52      
53  <div class="intro-contents">
54      <div class="container">
55      
56      <div class="heading">
57          <h2>読める作品例</h2>
58      </div>
59      <div class="arts">
60           <div class="art">
61             <div class="art-icon">
62               <img src="img/piece.png">
63                <p>ワンピース</p>
64               </div>
65             <p class="txt-contents"></p>
66           </div>
67          
68          <div class="art">
69             <div class="art-icon">
70               <img src="kyojin.png">
71                <p>進撃の巨人</p>
72               </div>
73             <p class="txt-contents"></p>
74           </div>
75          
76          <div class="art">
77             <div class="art-icon">
78               <img src="wata.png">
79                <p>私がモテないのはどう考えてもお前らが悪い!</p>
80               </div>
81             <p class="txt-contents"></p>
82           </div>
83          
84          <div class="art">
85             <div class="art-icon">
86               <img src="chain.png">
87                <p>チェンソーマン</p>
88               </div>
89             <p class="txt-contents"></p>
90           </div>
91          
92      </div>
93          
94      </div>
95      
96      
97      
98      </div>
99      
100      
101      
102      <div class="lets">
103          <div class="container">
104          <div class="heading">
105              <h2><div class="kari">さあ、あなたの好きなあの作品を探してみましょう!</div></h2>
106              <h3>Let's enjoy comic life!</h3>
107              </div>
108          <span class="btn message">さっそく読んでみる</span>
109          
110          
111          </div>
112      
113      
114      </div>
115      
116      
117      
118      
119      <footer></footer>
120
121  
122  
123  </body>

CSS
1.container{
2    width:1170px;
3    padding:0 15px 0 15px;
4    margin:auto;
5}
6
7.top-img{
8    padding:180px 0 100px 0;
9    color:white;
10    background-image:url(img/one.png);
11    text-align:center;
12    
13}
14
15.top-img h1{
16    opacity:1;
17    font-size:45px;
18    letter-spacing:5px;
19}
20
21.top-img p{
22    opacity:1;
23}
24
25.btn{
26    padding: 8px 24px;
27    color:white;
28    display:inline-block;
29    opacity:1;
30    border-radius:4px;
31}
32
33.btn:hover{
34    opacity:1;
35}
36
37.signup{
38  background-color:#239b76;
39}
40
41
42.facebook{
43  background-color:#3b5998;
44  margin-right:10px;
45}
46
47
48.twitter{
49  background:#55acee;
50}
51
52.btn-img{
53    margin:10px 0;
54}
55
56.btn-img p{
57    margin:10px 0;
58}
59
60.fa{
61    margin-right:5px;
62}
63
64header{
65    height:65px;
66    background-color:rgba(34,49,52,0.9);
67}
68
69.logo{
70    float:left;
71    width:124px;
72    margin-top:0px;
73    padding-top:15px;
74    color:white;
75    font-size:25px;
76}
77
78.header-right{
79  float:right;
80  background-color:rgba(255, 255, 255, 0.3);
81  transition:all 0.5s;
82}
83
84
85
86
87.header-right:hover{
88    background-color:rgba(255,255,255,0.5)
89}
90
91.header-right a{
92  line-height:65px;
93  padding:0 25px;
94  color:white;
95  display:block;
96}
97
98.intro-contents{
99    height:500px;
100    padding-bottom:80px;
101    background-color:#FF9933;
102    text-align:center;
103}
104
105.heading{
106    padding-top:60px;
107    padding-bottom:30px;
108    color:#5f5d60;
109}
110
111.heading h2{
112    font-weight:normal;
113    color:white;
114}
115
116.art{
117    float:left;
118    width:25%;
119}
120
121.art-icon p{
122 
123  top:90px;
124  width:100%;
125  color:white;
126}
127
128.txt-contents{
129  width:80%;
130  display:inline-block;
131  margin-top:20px;
132  font-size:12px;
133  color:#b3aeb5;
134}
135
136.message{
137  background-color:#5dca88;
138  padding:15px 40px;
139}
140
141.heading h3{
142  font-weight:normal;
143} 
144
145.kari{
146    color:black;
147}
148