HTML,CSS　文字の配置

progateでHTML ,CSSのコードを書いていたのですが、下の写真のように画像の中心に文字を置きたいのですが、調整しようとしてもHTML＆CSSやjQueryなどの４つ全ての文字が動いてしまいます。
どのように修正すればいいでしょうか？

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

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

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

回答1件

ベストアンサー

.icon h3のスタイルを下記のように修正してはどうでしょうか。

css
1.icon h3{
2	position:relative;
3	bottom:105PX;
4	/*left:20PX; 削除*/
5	width:100%;
6	color:white;
7	font-size:15px;
8	text-align: center; /*追加*/
9}