div要素の中の子要素が、div要素の下に表示される

HTMLコードの最下段の<div class="step-container">の子要素が、下に表示されてしまうのですが、原因がわかりません。
イメージでは画像の赤枠の中にテキストが入るはずなのですが・・・。

HTML
1<!DOCTYPE html>
2 <head>
3  <meta charset="utf-8">
4  <title>ISARA</title>
5  <link rel="canonical" href="URL">
6<link rel="stylesheet" href="kkk.css">
7</head>
8 <body>
9  <header>
10    <a><img class="header-logo" src = "ISARA.img/isaralogo.png" alt = "header-logo" title = "header-logo"></a>　　
11    <p class="heading">バンコクのノマドエンジニア育成講座</p>
12    <a class="inquiry" >お問い合わせ/資料請求はこちら</a>
13  </header>
14  <main>
15　　<h1>プログラミングで<br>人生の安定を手に入れよう</h1>　
16    <p><img class="main-img" src="ISARA.img/main.jpg" alt="main-img"></p>
17    <p><img class="main-logo" src="ISARA.img/isaralogolarge.png" alt="main-logo"></p>
18    <h2>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]<h2>
19  </main>
20  <div class="container">
21   <p class="container-p1">まずは20日間で、<br>月10万円を稼げるスキルを手に入れよう。</P>
22   <p class="container-p2">※受講料金は実質０円です。詳しくは資料請求をどうぞ。
23   <p class="large-inquiry">お問い合わせ＆資料請求はこちら</p>
24   <ul class="container-ul">
25    <li>第５期生：2019年４月8日 ~ 2019年4月27日　＊締め切りました</li>
26    <li>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</li>
27    <li>第７期生：資料請求受付中</li>
28   </ul>
29   <div class="twitter-button">
30    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
31    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
32    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
33   </div>
34  </div>
35  <div class="introduction">
36   <h2>エンジニアとして本当の自由を手に入れるためには？</h2>
37   <p>エンジニアの需要の高まりに伴い、プログラミングスクールが増えています。<br>しかし、そこでの学習の先は、提携して決められた就職先に就職すること。</p>
38　 <p>これで本当にいいですか？<br>日本人エンジニアはアメリカと比べ、給料が格段に安い。<br>その理由がここにありエンジニアは自分の給料をコントロールすべきなのです。</p>
39　 <p>スキルを身に着けたエンジニアは、人生をコントロールすることでより自由に。<br>そこで必要なのが<span>「稼ぐ力」</span>です。</p>
40   <p><img class="introduction-img" src="https://isara.life/wp-content/themes/isara_v2/img/introbottom.jpg"></p>
41   <a class="about-circle">ABOUT</a>
42  </div>
43  <div class="introduction2">
44   <h3>ノマドエンジニア育成講座<br>isara[イサラ]とは</h3>
45   <p>「稼ぐこと」にフォーカスしたウェブエンジニア育成講座です。</p>
46
47   <div class="engineers-skill-box">
48     <p class="engineers-skill-question">稼げるエンジニアに必要な５つのスキルとは？</p>
49    <div class="f-engineers-skill">
50     <div class="engineers-skill-icon">
51      <p><img src="ISARA.img/skill.jpg" alt="skill-icon"></p>
52      <p><img src="ISARA.img/sales.jpg" alt="sales-icon"></p>
53      <p><img src="ISARA.img/document.jpg" alt="document-icon"></p>
54      <p><img src="ISARA.img/plusone.jpg" alt="plusone-icon"></p>
55      <p><img src="ISARA.img/connection.jpg" alt="connection-icon"></p>
56     </div>
57     <div class="engineers-skill-text">
58      <p>基礎的な<br>プログラミングスキル</p>
59      <p>案件獲得に必要な<br>営業力</p>
60      <p>見積制作から<br>納品までの知識</p>
61      <p>自分の付加価値を<br>高めるスキル</p>
62      <p>フリーランス同士の<br>横のつながり</p>
63     </div>
64    </div>
65   </div>
66  <div class="step">
67   <p><img class="key-board-img" src="https://isara.life/wp-content/themes/isara_v2/img/aboutsecondbg.jpg" alt="keyboard-img"></p>
68    <div class="step-text">
69     <h4>iSaraで「基本的なプログラミングスキル」は教えません</h4>
70     <p>基礎的なプログラミングスキルは無料で学べる時代。</p>
71     <p>iSaraでは、基礎知識学習は<span>事前課題</span>と<span>チャットサポート</span>のみ。</p>
72    </div>
73    <div class="step-containers">
74     <div class="step-container">
75       <p class="step-container-p1">step.1</p>
76       <p class="step-container-p2">[バンコク渡航前1か月]</p>
77       <p>事前課題で基礎知識を学ぶ</p>
78     </div>
79    </div>
80  </div>
81</body>
82

CSS
1body {
2 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
3 margin: 0;
4
5}
6header{
7 height: 75px;!important
8 padding-top: 14px;
9 position:fixed;
10 background-color:#FFFFFF;
11 width:100%;
12z-index:10;}
13
14.heading{
15 position: absolute;
16 top: 25px;
17 bottom: 57px;
18 left: 180px;
19 font-size: 14px;
20 line-height: 16px;
21}
22
23.header-logo{
24 position: absolute;
25 top:14px;
26 bottom:58px;
27 left: 46px;
28 width: 128px;
29 height: 44px;
30}
31.inquiry{
32 cursor:pointer;
33 font-size:14px;
34 text-align: center;
35 background-color: #DA6B64;
36 padding:11px 0px;
37 color:#E8E7EF;
38 border-radius: 20px;
39 position:absolute;
40 top: 16px;
41 left: 899px;
42 width: 317px;
43 font-weight: 300px;
44 line-height:22px;
45 letter-spacing:2px;
46 }
47.inquiry:hover{
48 background-color:#D84940;
49}
50main{
51 width:1263px;
52}
53.main-img{
54  width: 100%;
55  height: 535px;}
56main h1{
57  margin-right:-100%;
58  text-align: center;
59  position:absolute;
60  top:25%;
61  left: 37%;
62  line-height: 45px;
63  font-size:28px;
64}
65main h2{
66  height:44px;
67  text-align: center;
68  position:absolute;
69  top:65%;
70  left:37%;
71  font-size:20px;
72  line-height:22px;
73}
74.main-logo{
75  position:absolute;
76  top:276px;
77  left: 473px;
78  width: 317px;
79  height: 111px;
80}
81.container{
82  height: 603px;
83  background-color:#EBB94D;
84  margin-top:-25px;
85  text-align: center;
86  color:#FFFFFF;
87  letter-spacing:2px;
88  }
89.container-p1{
90  position:absolute;
91  top:595px;
92  left:33%;
93  font-size:20px;
94  line-height:32px;
95  }
96.container-p2{
97  position:absolute;
98  top:682px;
99  left:27%;
100  color:#c7254e;
101  background-color:#FFFFFF;
102  font-size:18px;
103  line-height:29px;
104  font-family:"Courier New", monospace;
105  border-radius: 5px;
106}
107.large-inquiry{
108  height:104px;
109  width:1028px;
110  position:absolute;
111  top: 756px;
112  left: 10%;
113  border-radius:50px;
114  font-size:28px;
115  text-align:center;
116  background-color:#DA6B64;
117  color:#FFFFFF;
118  line-height:100px;
119  cursor:pointer;
120}
121.large-inquiry:hover{
122  background-color:#D84940;
123
124}
125.container-ul{
126  font-size:20px;
127  line-height:32px;
128  position:absolute;
129  top: 927px;
130  left: 20%;
131  list-style:none;
132}
133.container-ul li{
134  margin-bottom:35px;
135}
136.twitter-button{
137  position:absolute;
138  top:1150px;
139  left:530px;
140}
141.introduction{
142 margin-bottom:-500px;
143}
144.introduction h2{
145  position:relative;
146  top:30px;
147  left: 15%;
148  font-size:28px;
149  font-weight:600;
150  display: inline-block;
151  padding:30px 70px;
152}
153.introduction h2:before,.introduction h2:after{
154    content:'';
155    width: 40px;
156    height: 40px;
157    position: absolute;
158    display: inline-block;
159}
160.introduction h2:before{
161    border-left: solid 4px #EBB94D;
162    border-top: solid 4px #EBB94D;
163    top:0;
164    left: 0;
165}
166.introduction h2:after{
167    border-right: solid 4px #EBB94D;
168    border-bottom: solid 4px #EBB94D;
169    bottom:0;
170    right: 0;
171}
172.introduction p{
173  margin-top:50px;
174  margin-bottom:-40px;
175  text-align: center;
176  font-size:20px;
177}
178.introduction span{
179  display:inline-block;
180  border-bottom: 8px solid #EBB94D;
181 height:20px;
182 font-size:22px;
183  font-weight:1000;
184}
185.introduction-img{
186  position: relative;
187  top: -460px;
188  z-index: -1;
189  width: 100%;
190}
191.about-circle{
192  background-color: #EBB94D;
193  width: 80px;
194  height: 80px;
195  border-radius: 50%;
196  color:#FFFFFF;
197  position: absolute;
198  left:590px;
199  top:1780px;
200  font-size:15px;
201  line-height:80px;
202  text-align:center;
203}
204.introduction2{
205  background-color:#FEF5E0;
206  height:800px;
207}
208.introduction2 h3{
209  position: relative;
210  top:100px;
211  left:150px;
212  font-size:28px;
213  font-weight:600;
214  width:80%;
215 text-align:center;
216}
217  .introduction2 h3:before,.introduction2 h3:after{
218      content:'';
219      width: 40px;
220      height: 40px;
221      position: absolute;
222      display: inline-block;
223  }
224  .introduction2 h3:before{
225      border-left: solid 4px #EBB94D;
226      border-top: solid 4px #EBB94D;
227      top:-50px;
228      left: 100px;
229  }
230  .introduction2 h3:after{
231      border-right: solid 4px #EBB94D;
232      border-bottom: solid 4px #EBB94D;
233      bottom:-50px;
234      right: 100px;
235  }
236.introduction2 p{
237  text-align:center;
238  font-size:20px;
239  font-weight:550;
240  position:relative;
241  top:170px;
242}
243.engineers-skill-box{
244  border: solid 2px #EBB94D;
245  border-radius:5px;
246  width:90%;
247  position:relative;
248  top:200px;
249  left:50px;
250  height:200px;
251  padding-top:30px;
252  background-color:white;
253}
254.engineers-skill-question{
255margin-top:-170px;
256font-size:20px;
257font-weight:550;
258}
259.engineers-skill-icon{
260 display:flex;
261}
262.engineers-skill-icon p{
263 flex-direction:row;
264 margin-left:70px;
265 position:relative;
266 top:150px;
267 left:210px;
268}
269.engineers-skill-text{
270  display:flex;
271}
272.engineers-skill-text p{
273 flex-direction:row;
274 font-size:12px;
275 margin-left:40px;
276 position:relative;
277 top:110px;
278 left:205px;
279}
280.step{
281  position:relative;
282  top:100px;
283}
284.key-board-img{
285  width:100%;
286}
287.step-text{
288position:relative;
289top:-420px;
290color:#FFFFFF
291}
292.step-text h4{
293  position:relative;
294  top:180px;
295  text-align:center;
296font-size:28px;
297font-weight:550;
298}
299.step-text span{
300  color:#EBB94D;
301}
302.step-containers{
303  display:flex;
304}
305.step-container{
306  flex-direction:row;
307  background-color:#FFFFFF;
308  border:solid red;}
309
310.step-container-p1{
311  color:#EBB94D;
312}
313.step-container-p2{
314  font-size:18px;
315}