html,cssで画像ボタンを横並びにする方法について教えてください。

### 前提・実現したいこと

html,cssで画像ボタンを横並びに配置するためdisplay:flexを使っていますが、
上手くいかず縦並びになってしまいます。
横並びにする方法について回答をお願いいたします。

試したこと

親要素のclassでdisplay:flex;を入力した。

html
1
2
3<main>
4            <section id="magazine" class="wrapper">
5                <div class="text">
6                    <p class="title">A special, long article in a newspaper or magazine</p>
7                    <p>テキストテキストテキストテキストテキストテキストテキストテキストト</p>
8                </div>
9
10                <div class="flex-item">
11                    <a href="#"><img src="images/antique.jpg" alt="画像1">
12                        <p>Archive</p>
13                    </a>
14                </div>
15
16                <div class="flex-item">    
17                    <a href="#"><img src="images/antique.jpg" alt="画像1">
18                        <p>News</p>
19                    </a>
20                </div>

css
1.title{
2    display: flex;
3    justify-content: center;
4}
5
6.text p{
7    display: flex;
8    justify-content: center;
9}
10
11.flex-item{
12    position:relative;
13    display: flex;
14}
15
16.flex-item img{
17    width:50%;
18}
19
20.flex-item p{
21    color:brown;
22    position:absolute;
23    top:0;
24    left:0;
25}