画像とボーダーがずれる原因を知りたいです

下記のサイト作成ですが、画像とボーダーの位置ずれが直りません。解決策を教えてください。

※文字数により、初めのHTMLは省略します！

調べたこと
・Flexboxの使い方について調べました

試したこと
・調べ、画像とボーダーのwidthが一致していない→同じ数値に調整→変わらない。

HTML
1
2
3</head>
4<body>
5    <!--ヘッダー-->
6    <header class="page-header">
7            <h1 class="header-logo">
8                <img  src="Image_practice/logo.png" alt="ロゴ">
9            </h1>
10        <div class="header-nav">
11            <nav>
12                <ul class="nav_ul"> 
13                    <li class="nav_li"><a href="#">お問い合わせ</a></li>
14                    <li class="nav_li"><a href="#">ログアウト</a></li>
15                </ul>
16            </nav>
17        </div>
18       
19    </header>
20    <!--メイン-->
21        <div class="main_image">    
22            <div class="main_text">No Coding No Life</div>
23        </div>
24     <!--コース一覧-->
25    <div class="main_course">
26        <h2 class="main_contents">コース一覧</h2>
27       <div class="main_wrapper">
28            <section class="IT_course">
29            
30                <img class="IT_image"src="image_practice/wordpress.png" alt="wordpress">
31            <div class="IT_text">
32                <p>
33                    WordPressの基礎を理解し、2つ のテーマ開発を目指します。実務 に近い形で学習します。
34                </p>
35
36                <div class="main_time">
37
38                    <p>
39                        申込締切<br>
40                        2021年12月31日26時
41                    </p>
42                </div>
43
44            </div>
45            </section>
46            <section class="IT_course">
47                <img class="IT_image" src="image_practice/shopify.png" alt="shopify">
48                <div class="IT_text">
49                    <p>
50                        Shopifyを用いて3つのECサイト を構築することを通してと応用を 学んでいきます。
51                    </p>
52                
53                    <div class="main_time">
54
55                        <p>
56                            申込締切<br>
57                            2021年12月31日26時
58                        </p>
59                    </div>
60                </div>
61               
62
63
64            </section>
65            <section class="IT_course">
66                <img  class="IT_image" src="image_practice/rails.png" alt="rails">
67                <div class="IT_text">
68                    <p>
69                        RubyとRuby on Railsを3つの アプリケーションを開発すること を通して学びます。
70                    </p>
71                    <div class="main_time">
72
73                        <p>
74                            申込締切<br>
75                            2021年12月31日26時
76                        </p>
77                    </div>
78                </div>
79
80            </section>
81            <section class="IT_course">
82                <img class="IT_image" src="image_practice/ai.png" alt="ai">
83                <div class="IT_text">
84                    <p>
85                        Pythonの基礎を学習した後、3 つの機械学習プログラムを作成す ることを目指します。
86                    </p>
87                    <div class="main_time">
88
89                        <p>
90                            申込締切<br>
91                            2021年12月31日26時
92                        </p>
93                    </div>
94                </div>
95            </section>
96         </div>
97        <!--ボタン-->
98        <div class="btn"><a href="#">
99            もっと見る</a>
100        </div>
101    </div>
102        <!--講師紹介-->
103        <section class="teacher_invited">
104            
105            <img class="teacher_image" src="image_practice/DMYn1uwGMkEBJ2d1612792974_1612793004.png" alt="水谷メアリージュン">
106              <div class="teacher_text">
107                <ul class="teacher_list">
108                    <li class="teacher_item">
109                        <h2>水谷メアリージュン</h2>
110                        <div class="teacher_info">
111
112                            <p>
113                            システムエンジニア歴約20年、プログラミング歴約35年。プログラミング の守備範囲は、<br> 
114                            フロントエンド、サーバサイド、Android開発と広く、普段 はシステム開発プロジェクト<br>
115                            の管理や後輩の指導を行っています。
116                            </p>
117                        </div>
118                    </li>
119
120                </ul>
121              </div>
122             
123        </section>
124        <section class="teacher_invited">
125            <img src="image_practice/qFrBv7tSPM5b0YK1612793069_1612793086.png" alt="ジョージ・ウィリアム">
126              <div class="teacher_text">
127                <ul class="teacher_list">
128                    <li class="teacher_item">
129                            <h2>ジョージ・ウィリアム</h2>
130                            <div class="teacher_info">
131                                <p>
132                                    IoT技術をベースに、ハードウェアからクラウドまでを広くカバーする他、 小学生から大人<br>
133                                    まで幅広く、プログラミングに関する指導経験が多数あります。  
134                                </p>
135                            </div>
136                    </li>
137                </ul>
138              </div>
139        </section>
140        <!--メッセージ-->
141        <div class="message-image">
142                
143                <div class="message_contets">
144                    <h3 class="message_title">動き出すなら、今だ</h3>
145                        <div class="message_text">
146                            <p>「自由な場所で働きたい」<br>
147                                「自由な時間に働きたい」<br>
148                                「個人で稼げる力を身に付けたい」<br>
149                                <br>
150                                プログラミングはこれら全てを叶えてくれる。<br>
151                                人生を変える力を持っている。<br>
152                                さあ、今日を人生のターニングポイントにしよう。
153                            </p>
154                        </div>
155                </div>
156                <!--ボタン-->
157                <div class="btn">
158                    <p class="btn_document"><a href="#">資料請求する</a>
159                        
160                    </p>
161                </div>
162         </div>
163        
164
165    <!--フッター-->
166    <footer class="page-fotter">
167        <p>
168            &copy;Copyright(2021 Coding School All Rights Reserved.
169        </p>
170
171    </footer>
172    
173</body>
174</html>

CSS
1@charset "UTF-8";
2body{
3    font-family: ヒラギノ明朝 Pro,W6;
4    max-width: 1280px;
5    text-align: center;
6    margin-left: auto;
7    margin-right: auto;
8    
9}
10
11/*ヘッダー*/
12.page-header{
13    background: #000;
14    max-width: 1280px;
15    max-height: 80px;
16    margin: 0 auto;
17    display: flex;
18
19}
20
21
22.header-logo{
23    width: 193px;
24    margin-top: 15px;
25    margin-bottom: 15px;
26    margin-left: 10px;
27    
28}
29
30.header-nav{
31    display: flex;
32    margin-left: auto;
33    padding-right: 25px;
34    
35}
36.nav_ul{
37    display: flex;
38    list-style: none;
39    line-height: 1.68;
40}
41.nav_li:nth-child(2){
42    padding-left: 25px;
43}
44
45.nav_li a{
46        color: #fff;
47        margin-left: auto;
48}
49
50a{
51    text-decoration: none;
52}
53
54/*メイン画像*/
55.main_image{
56
57    background-image: url(../image_practice/work-3938876_1920.png);
58    width: 100%;
59    background-size: cover;
60    background-position: center;
61    height: 551px;
62}
63.main_text{
64    font-size: 60px;
65    padding: 240px 364px;
66
67}
68/*コース一覧*/
69
70.main_contents{
71    text-align: center;
72    margin-top: 52px;
73    margin-bottom: 40px;
74    line-height: 1.7;
75}
76
77.main_wrapper{
78            text-align: center;
79            display: inline;
80            display: flex;
81}
82
83
84
85/*イメージ図*/
86.IT_image{
87    width: 291px;
88    display: flex;
89    width: 100%;
90    text-align: center;
91}
92.IT_course{
93    width: 291px;
94    box-shadow: 0px 3px 6px #00000029;
95    margin-bottom: 50px;
96}
97.IT_course:nth-child(n+2){
98    margin-left: 20px
99}
100
101.IT_image:first-child{
102    margin-left: 28px;
103}
104.IT_image:last-child{
105    margin-left: 28px;
106}
107
108
109
110.IT_text{
111    margin-top: 20px;
112    margin-right: 10px;
113    margin-bottom: 10px;
114    margin-left: 10px;
115}
116
117.IT_text p{
118    font-size: 18px
119    line-height: 1.33;
120}
121
122.main_time {
123    text-align: center;
124    position: relative;
125    margin-top: 48px;
126}
127
128.main_time:before{
129    position: absolute;
130    content: "";
131    width: 80%;
132    height: 1px;
133    background: #707070;
134    left: 0;
135    right: 0;
136    margin: auto;
137    top: -9px;
138    
139}
140.main_time p{
141    font-size: 16px
142}
143.main_time:nth-child(2){
144    margin-top: 8px;
145}
146
147
148/*ボタン*/
149.btn{
150    
151    margin-top: 50px;
152    text-align: center;
153}
154.btn a{
155    width: 310px;
156    height: 52px;
157    box-shadow: 0px 3px 6px #00000029;
158    border: 1px solid #EEE;
159    border-radius: 5px;
160    line-height: 1.72;
161}
162/*講師紹介*/
163.teacher_invited{
164    display: flex;
165    align-items: center;
166}
167
168.teacher_invited:nth-child(n+2){
169    margin-top: 57px;
170    margin-bottom: 83px;
171}
172
173.teacher_invited p {
174    display: block;
175    
176}
177
178.teacher_image{
179    width: 250px;
180}
181
182.teacher_text{
183    display: block;
184    margin: 0 120px;
185
186}
187
188.teacher_text p {
189    margin-top: 30px;
190    font-size: 16px;
191}
192.teacher_list{
193
194}
195
196.teacher_item{
197    margin-left: 61px;
198}
199.teacher_info{
200    display: block;
201    flex: 1;
202}
203/*メッセージ*/
204.message-image{
205    background-image: url(../image_practice/work-3938876_1920.png);
206    background-image: url(../image_practice/success-846055_1920.png);
207    background-size: cover;
208    background-position: center;
209    height: 455px;
210}
211.message_contents {
212    
213    text-align: center;
214}
215
216.message_title{
217    color: #fff;
218    padding-top: 62px;
219    padding-bottom: 53px;
220    font-size: 36px;
221    line-height: 1.69;
222}
223.message_text{
224    
225    color: #fff;
226    padding-bottom: 32px;
227    font-size: 16px;
228    line-height: 1.75;
229}
230
231.message_text p {
232    margin-top: 20px;
233    line-height: 2;
234}
235/*ボタン*/
236.btn{
237    text-align: center;
238    margin-top: 32px;
239
240}
241
242.btn_document a {
243    width: 210px;
244    
245    background-color: #DC143C;
246    border-shadow : 0px 3px 6px;
247    border-radius:  5px;
248    font-size: 16px;
249    color: #fff;
250    padding: 20px;
251    text-align: center;
252    display: inline-block;
253
254}
255
256
257

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

回答1件

ベストアンサー

CSS
1/*
2.IT_image:first-child{
3    margin-left: 28px;
4}
5*/

投稿2021/04/23 09:59

kei344

総合スコア69606

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像とボーダーがずれる原因を知りたいです

関連した質問