Flexboxで横に表示されない。

下記のコードは＊画像と文字列（テキスト）をFlexBoxで横並びに表示しようとしたものですが、横並びに表示されないで縦に並びます。
原因がわかりません。
ご教示をお願いします。

jpgデーター　

HTML
1コード
2
3    
4        <section　class="catalog-antique">
5                
6            <div class="item-flex wrapper"> 
7                    <img src="img/catalog.jpg" width=500 height=500  alt="">            
8                    
9            
10            <div class="item">
11                
12                <h3 class="sec-title">Catalog</h3>
13                <p>
14                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
15                </p>
16                <p>
17                    テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
18                </p>
19                <p>     
20                    テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
21                </p>
22                
23            </div>
24            
25        </div>  
26
27

CSS
1コード
2
3
4.section {
5    background-color:#F5F5F5 ;
6    width: 100%;
7    margin: 0;
8
9}
10
11.catalog-antique {
12    background-color: #f5f5f5;
13    padding: 60px 0;
14
15}
16
17.catalog-antique .sec-title {
18    margin-bottom: 40px;
19}
20
21
22.catalog-antique .item {
23    width:50%;
24    text-align: center;
25}
26
27.catalog-antique  .item-flex {
28    display: flex;
29    
30    align-items: center;
31    justify-content:space-between;
32    list-style: none;
33}
34
35
36  .catalog-antique .item p {
37    margin-bottom: 30px;
38    text-align: left;
39  }
40
41  .catalog-antique .item p:last-child {
42    margin-bottom: 0;
43  }
44
45
46