レスポンシブ対応が上手くいきません。画像やテキストが中央に配置されない。

実現したいこと
レスポンシブ対応のコード書いているのですが、元もとの画面（大きい画面）では付属画像１のように１画面に文字と画像が横並びになっています。

それをスマホの狭い画面では縦に配置したいのですが、付属画像２のように、画面幅（300px以上の時までの適応）のクロームのディべロっパーツールでの画像ですが、写真や青文字タイトル、その下の文字が中央に行かず、左寄りになってしまいます。これをすべて中央に表示させたいです。

**付属画像１　**もとの配置（ｐｃ）画面

付属画像２

試したこと。
レスポンシブｃｓｓのスタイルシートに
.flex{
display:block;
を追加するとスマホで縦配置になる旨がサイトに書いてあったので、試したてみたら、確かにスマホ表示では縦並びになったのですが、中央に配置されず、左寄りになってしまいます。

どうしたらよいでしょうか？改善しません。回答よろしくお願いいたします。

html
1<!DOCTYPE html>
2
3<html>
4
5<head>
6    <meta content="text/html; charset=utf-8" />
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title></title>
9    <link rel="stylesheet" href="senden.css">
10    <link rel="stylesheet" href="reset.css">
11    <link rel="stylesheet" href="sendenresponsive.css">
12    <style type="text/css">
13      
14        /* 画像と文字の背景色の設定 */
15        .wrap {
16            width: 100%;
17            margin: 0 auto;
18            background: rgb(230, 236, 230);
19        }
20
21    </style>
22</head>
23<body>
24
25    <div class="wrap">
26        <!--画像と文字の背景色の設定-->
27        <div class="flex">
28            <!--画像の横に文字を書くためflexのｃｓｓとdivで囲む-->
29
30            <div>
31                <p><img src="senden2.png" alt="［写真］" class="example3"> </p>
32            </div>
33            <div class="title3">
34                <p>任天堂のゲームソフトは世界中で爆発的な人気があります。</p>
35                <p class="kuuhaku2"></p><!--空白の設定-->
36                <div>
37                特にレトロゲームは海外では入手が難しく、わざわざ日本に買いにくる旅行者も多いです。
38                これらのソフトは日本語表記のものも多く、高値で買ってもらえるのも特徴といえるでしょう。
39                レトロゲームは40代以降の大人に人気が高いです。
40                任天堂のゲームは一時期のブームで終わっていくものとは違い、知名度の高いキャラクターを使用し、継続した
41                シリーズタイトルでの販売が多く、
42                普段ゲームをやらない層にまで、波及しています。
43               </div>
44         </div>
45        </div>
46    </div>
47
48   
49
50</body>
51
52</html>

css
1
2/* 画像中央配置 */  
3.center{
4  text-align: center;
5}
6
7/* 空白の設定 */
8.kuuhaku2{
9  margin-top: 25px;
10}
11/* 画像の横の説明文の設定 */
12.title3 div{
13/* class="title3"の要素の子孫要素になっているdiv要素 */
14  width: 100%;
15  text-align: justify;/* 両端揃え */
16  text-justify: inter-ideograph;/* 両端揃えの種類 *//* 均等振り分け（日本語向き）文字の端を揃える */
17 
18  font-size: 20px;
19  color: rgb(68, 68, 68);/* 文字の色 */
20  letter-spacing: 0.1em;/* 文字と文字の横の余白 */
21  line-height:32px;/* 行間の高さ */
22}
23
24 
25
26  /* 画像の大きさ調節 */
27img.example3 {
28  width: 100%;
29  height: 600px;
30  
31  }
32/* 画像の横に文字を配置する */
33  .flex{
34      display: flex;/* 画像の横に文字を配置する */
35      padding: 10px;
36  }
37  .flex>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする（title3 divを適応させるため） */
38      width: 50%;
39      margin: 10px;/* 外側の空白上下左右 ????にする*/
40      padding: 10px;/* 内側の空白上下左右????にする */
41  }
42/* 画像の横に文字のスタイル(タイトル） */
43.title3 p{
44  font-size: 34px;
45  line-height:45px;/* 文字を大きくして中央に配置するための処置 */
46  font-family: "ＭＳ ゴシック",sans-serif; /* 文字の種類 */
47  color:rgb(30, 13, 189);
48}
49

◎◎レスポンシブのｃｓｓ

sendenrensonsivecss
1/* 画面幅（300px以上の時までの適応）指定 */
2@media screen and (min-width: 300px){
3
4
5  
6  /* 画像中央配置 */  
7  .center{
8    text-align: center;
9  }
10
11 /* 画像の大きさ調節 */
12 img.example3 {
13    width: 100%;
14    height: 300px;
15    text-align: center;
16    }
17
18
19/* 画像の横に文字を配置する */
20  .flex{
21    display:block;
22      padding: 10px;
23     
24  }
25  .flex>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする（title3 divを適応させるため） */
26      width: 80%;
27      margin: 10px;/* 外側の空白上下左右 ????にする*/
28      padding: 10px;/* 内側の空白上下左右????にする */
29  }
30  
31/* 画像の横に文字のスタイル(タイトル） */
32.title3 p{
33    font-size: 22px;
34    line-height:35px;/* 文字を大きくして中央に配置するための処置 */
35    font-family: "ＭＳ ゴシック",sans-serif; /* 文字の種類 */
36    color:rgb(30, 13, 189);
37  }
38
39 /* 空白の設定 */
40.kuuhaku2{
41    margin-top: 15px;
42  }
43  /* 画像の横の説明文の設定 */
44  .title3 div{
45  /* class="title3"の要素の子孫要素になっているdiv要素 */
46    width: 80%;
47    text-align: justify;/* 両端揃え */
48    text-justify: inter-ideograph;/* 両端揃えの種類 *//* 均等振り分け（日本語向き）文字の端を揃える */
49   
50    font-size: 10px;
51    color: rgb(68, 68, 68);/* 文字の色 */
52    letter-spacing: 0.1em;/* 文字と文字の横の余白 */
53    line-height:32px;/* 行間の高さ */
54  }
55
56}
57

◎◎リセットｃｓｓ　ドクター

resetcss
1/* 
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com 
6Twitter: @rich_clark
7*/
8 
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure, 
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29 
30body {
31    line-height:1;
32}
33 
34article,aside,details,figcaption,figure,
35footer,header,hgroup,menu,nav,section { 
36    display:block;
37}
38 
39nav ul {
40    list-style:none;
41}
42 
43blockquote, q {
44    quotes:none;
45}
46 
47blockquote:before, blockquote:after,
48q:before, q:after {
49    content:'';
50    content:none;
51}
52 
53a {
54    margin:0;
55    padding:0;
56    font-size:100%;
57    vertical-align:baseline;
58    background:transparent;
59}
60 
61/* change colours to suit your needs */
62ins {
63    background-color:#ff9;
64    color:#000;
65    text-decoration:none;
66}
67 
68/* change colours to suit your needs */
69mark {
70    background-color:#ff9;
71    color:#000; 
72    font-style:italic;
73    font-weight:bold;
74}
75 
76del {
77    text-decoration: line-through;
78}
79 
80abbr[title], dfn[title] {
81    border-bottom:1px dotted;
82    cursor:help;
83}
84 
85table {
86    border-collapse:collapse;
87    border-spacing:0;
88}
89 
90/* change border colour to suit your needs */
91hr {
92    display:block;
93    height:1px;
94    border:0;   
95    border-top:1px solid #cccccc;
96    margin:1em 0;
97    padding:0;
98}
99 
100input, select {
101    vertical-align:middle;
102}