display: flex;について（初心者です）

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML.CSSで簡単なレスポンシブサイトを模写しているものです。
初心者なので丁寧に回答していただけると幸いです。

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

丸い画像とTAYAKFAU LAHAOJDと下の文のセットを横ならびにしたいのですがdisplay: flex;にしてもできません。

該当のソースコード

HTML 
      <section id="About"  class="wrapper">

        <h2 class="A">About</h2>

        <div class="content">
          
          <img src="works/topK.jpg">
        
          <div class="text">
            <h3>TAYAKFAU LAHAOJD</h3>
            <p> 
              <br>
              tekisutotekisutotekisutotekisutotekisuto
              <br>
              tekisutotekisutotekisutotekisutotekisuto
              <br>
              tekisutotekisutotekisutotekisutotekisuto
            </p>
          </div>
          
        </div>
      </section>


CSS
.wrapper{
  margin:100px 480px;
}

.content img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 30px;
}

#about .content {
  display: flex;
  justify-content: center;
  align-items: center;
}

### 試したこと
![イメージ説明](42d1c239ef48430b684f0fd03a7c2f3f.jpeg)

### 補足情報（FW/ツールのバージョンなど）
見本のコード通りにやってもできなかったので誰かお優しい方教えていただきたいです。