レスポンシブデザイン：画像をセンター表示

前提・実現したいこと

HTML/CSSでレスポンシブデザインにしております
「article」の部分で、スマートフォン表示にする際に
画像が真ん中に配置したいのですができません。

真ん中に表示する方法を教えて頂ければ幸いです

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

レスポンシブデザイン（スマートフォン表示の際）
画像がセンターに表示されません

（他の大きいサイズの際は文字の右側に配置しています）

該当のソースコード

html
1body {
2    margin: 0;
3    font-family: YuGothic;
4    color: #555555;
5}
6
7<div class="article">
8            <div class="article-block">
9                <div class="article-left">
10                    <h2>We are necessary for</h2>
11                    <h2>human life.</h2>
12                    <p>Because we are very cute. </p>
13                    <p>Please leave it to us if you need help.</p>
14                    <a href="#" class="btn">MORE</a>
15                </div>
16    
17                <div class="article-img">
18                    <img src="img/img-right.jpg">
19                </div>
20            </div>
21            
22        </div>

css
1/* article */
2.article {
3    display: flex;
4    width: 980px;
5    margin: 0 auto;
6}
7
8.article-block {
9    margin-top: 70px;
10    width: 980px;
11}
12
13.article-left {
14    float: left;
15    text-align: left;
16}
17
18.article h2 {
19    font-size: 32px;
20    line-height: 25px;
21}
22
23.article p {
24    padding-top: 20px;
25    font-size: 22px;
26    line-height: 0px;
27}
28
29.article a {
30    font-size: 22px;
31    color: #51A2BC;
32    text-decoration: none;
33    border: 2px solid #51A2BC;
34    border-radius: 30px;
35    padding: 5px 40px;
36    display: inline-block;
37    margin-top: 20px;
38}
39
40.article a:hover {
41    background-color: #51A2BC;
42    color: white;
43    border: 2px solid #51A2BC;
44}
45
46.article-img {
47    float: right;
48}
49
50@media (max-width: 1000px) {
51    .navbar {
52        width: 850px;
53        margin: 0 auto;
54    }
55    .ability {
56        width: 900px;
57    }
58    .ability-row {
59        float: left;
60        width: 300px;
61    }
62    .article {
63        width: 850px;
64    }
65    
66  }
67  
68@media (max-width: 670px) {
69    .navbar img {
70        width: 256px;
71        margin-left: 15px;
72    }
73    .landeing {
74        background-size: cover;
75        width: 100vw;
76        height: auto;
77        min-height: 100vh;
78    }
79    .ability {
80        width: 300px;
81    }
82    .ability h2 {
83        margin-top: 10px;
84        margin-bottom: 0px;
85    }
86    .ability p {
87        font-size: 20px;
88        margin-bottom: 40px;
89    }
90    .article {
91        width: 400px;
92    }
93    .article-block {
94        width: 400px;
95    }
96    .article-left {
97        text-align: center;
98    }
99    .article-img {
100        margin-top: 50px;
101    }
102
103    .ability-img {
104        margin: 0 auto;
105        text-align: center;
106    }
107}