画像の下にテキストを配置しつつ、画像に対して文字を左揃えにしたいです。

前提・実現したいこと

画像の下にテキストを配置しつつ、画像に対して文字を左揃えにしたいです。
赤枠で囲っているところの画像のようなイメージです。

発生している問題・エラーメッセージ

画像に対して文字が中央配置となっていて、また画像と文字の間に余白が出来てしまっている状態です。
スクリーンショットを挿入したのですが、表示されなかったため文字だけでの説明です。伝わりづらいと思いますがご理解お願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" href="css/style.css">
5    <meta charset="UTF-8">
6    <title>練習</title>
7  </head>
8  <body>
9    <header>
10      <img src="img/main-vsual.png">
11    </header>
12
13      <h1>デイトラとは</h1>
14      <section>
15        <div class="pic">
16          <img src="img/about.png" alt="" width="700" height="500">
17        </div>
18
19        <div class="desk">
20          <p class="deitora">デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>
21            習アプリです。毎月設定された課題をこなしていくだけで、未経<br>
22            験から30日でプログラミングが身に付きます。<br>
23            1日1題30日でプロのWebエンジニアを目指しましょう！
24          </p>
25        </div>
26      </div>
27    </section>
28
29    <div class="iti">
30    <h1>コース一覧</h1>
31
32    <div class="gazo-box">
33      <img src="img/web_first.png" alt="" width="400"height="200">
34      <p>HTML/CSS/BootStrap</p>
35      </div>
36
37      <div class="gazo-box2">
38      <img src="img/web_second.png" alt="" width="400"height="200">
39      <p>HTML/CSSJavaScript//jQuery</p>
40    </div>
41
42    <div class="gazo-box3">
43      <img src="img/web_third.png" alt="" width="400"height="200">
44      <p>PHP/WordPress</p>
45    </div>
46
47    <h1>お問い合わせ</h1>
48    <h2>さあ今日から始めよう</h2>
49    <div class="btn">無料ではじめる</div>
50  </body>
51</html>
52

css
1div.iti {
2  text-align: center;
3}
4
5h1 {
6  color:darkslategray;
7  text-align:center;
8  clear:both;
9}
10
11section{
12  display:flex;
13}
14
15.pic{
16  margin-right:30px;
17  padding-left: 190px;
18  display: inline-block;
19  /* width: 70px;
20  height: ; */
21}
22
23.desk{
24  flex: 1;
25  padding-left: 30px;
26}
27
28p.deitora{
29  color:#3399CC;
30  padding-bottom: 100px;
31}
32
33.h2{
34  text-align:center;
35  padding-top:100px;
36}
37
38.gazo-box {
39  justify-content:space-between;
40  border:1px;
41  padding-right:20px; 
42  padding-left:20px;
43  text-align: center;
44  display:inline-block;
45}
46.gazo-box2 {
47  justify-content:space-between;
48  border:1px;
49  padding-right:20px; 
50  padding-left:20px;
51  text-align: center;
52  display:inline-block;
53}
54.gazo-box3 {
55  justify-content:space-between;
56  border:1px;
57  padding-right:20px; 
58  padding-left:20px;
59  text-align: center;
60  display:inline-block;
61}
62
63p {
64  text-align:center;
65}
66
67.btn{
68  text-decoration: none;
69  font-weight:bold;
70  font-size: large;
71  display:inline-block;
72  background: #ff6666;
73  width:300px;
74  line-height:3;
75  padding:5px;
76  border-radius:5px;
77  color:white;
78}　
79