前提

HTML/CSSを学習中です。
現在、実践演習を行っています。↑イメージのLPを目指して模写コーディング中です。

#実現したいこと
画像の下にテキストを配置しつつ、画像に対して文字を左揃えにしたいです。
↓イメージのコース一覧(赤枠)部分の様な配置を目指しています。
######本来指定したい状態

しかし現在、コース一覧(赤枠)部分は↓イメージの様な配置になっており、画像に対して文字が左揃えの状態ではありません。
######現在の誤りのある状態

画像の下にテキストを配置しつつ、画像に対して文字を左揃えにする方法を教えて頂けると助かります。よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

使用機器：Dynabook 15インチ
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>デイトラ/copy</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  
9</head>
10<body>
11  <header>
12    <div class="container">
13      <div class="header-left">
14        <h2>30DAYSトライアル</h2>
15      </div>
16      <div class="header-right">
17        <a href="#">デイトラとは</a>
18        <a href="#">コース一覧</a>
19        <a href="#">お問い合わせ</a>
20      </div>
21    </div>
22  </header>
23  <div class="main">
24    <div class="container">
25      <h1>1日1題30日で<br>プロのWebエンジニアになろう！</h1>
26      <p>毎日指定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身に付きます</p>
27    </div>
28  </div>
29  <div class="about-wrap">
30    <div class="container">
31      <div class="heading">
32        <h1>デイトラとは</h1>
33      </div>
34      <div class="about">
35        <div class="box">
36          <img src="img/about.png" >
37          <div class="right">
38            <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！
39            </p>
40          </div>
41        </div>
42      </div>
43    </div>
44  </div>
45  <div class="service-wrap">
46    <div class="container">
47      <div class="heading">
48        <h1>コース一覧</h1>
49      </div>
50      <div class="services">
51        <div class="service">
52          <div class="service-icon">
53            <img src="img/web_first.png">
54          </div>
55          <p>HTML / CSS / Bootstrap</p>
56        </div>
57        <div class="service">
58          <div class="service-icon">
59            <img src="img/web_second.png">
60          </div>
61          <p>HTML / CSS / JavaScript / jQuery</p>
62        </div>
63        <div class="service">
64          <div class="service-icon">
65            <img src="img/web_third.png">
66          </div>
67          <p>PHP / WordPress</p>
68        </div>
69      </div>
70    </div>
71  </div>
72  <div class="contact"></div>
73  <footer></footer>
74</body>
75</html>

css
1* {
2  color: navy;
3  text-decoration: none;
4  box-sizing: border-box;
5}
6
7div {
8  display: block;
9}
10header {
11  height: 65px;
12  width: 100%;
13  background-color: white; 
14  position: fixed;
15  top: 0;
16  z-index: 10;
17}
18.header-left {
19  float: left;
20  margin-left: 200px;
21}
22.header-right {
23  float: right;
24  margin-right: 200px;
25}
26.header-right a {
27  line-height: 65px;
28  padding: 0 25px;
29  /* color: white; */
30  display: block;
31  float: left;
32  transition: all 0.5s;
33}
34
35.main h1 {
36  /* opacity: 0.7; */
37  font-size: 45px;
38  /* letter-spacing: 5px; */
39}
40h1 {
41  display: block;
42  font-size: 2em;
43  margin-block-start: 0.67em;
44  margin-block-end: 0.67em;
45  margin-inline-start: 0px;
46  margin-inline-end: 0px;
47  font-weight: bold;
48}
49.main {
50  padding: 180px 0 100px 0;
51  background-image: url(img/main-vsual-nontitle.png);
52  /* color: white; */
53  background-size: cover;
54  text-align: center;
55}
56.about-section {
57  float: left;
58}
59.heading {
60  padding-top: 30px;
61  padding-bottom: 30px;
62  text-align: center;
63}
64
65.about {
66  text-align: center
67}
68.box {
69  margin: 10px 0;
70  float: left;
71  width: 100%;
72  display: flex;
73  justify-content: center;
74}
75
76.box img {
77  max-width: 35%;
78}
79
80.box p {
81  margin-left: 40px; 
82}
83
84.service-wrap {
85  margin-top: 400px;
86}
87
88.service {
89  display: inline-block;
90  text-align: center;
91}
92
93.service-icon img {
94  width: 300px;
95  float: left;
96  margin-left: 100px;
97}
98

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

回答1件

ベストアンサー

下記でどうでしょうか。

css
1/* 前略 */
2
3.service-wrap {
4  margin-top: 400px;
5  text-align: center; /* 追加 */
6}
7
8/* 以下追加 */
9.services {
10  display: inline-block; 
11}
12/* ここまで */
13
14.service {
15  display: inline-block;
16  text-align: left; /* 修正 */
17  margin-left: 100px; /* 追加 */
18}
19
20/* 以下追加 */
21.service:first-child {
22  margin-left: 0;
23}
24/* ここまで */
25
26.service-icon img {
27  width: 300px;
28/*  float: left; 削除 */
29/*  margin-left: 100px; 削除 */
30}