cssの当て方が分からない

実現したいこと

• 上記画像のようなレイアウトをCSSで設定したい。

前提

HTML&CSSの学習をしている初学者です。
現在HTML&CSSのアウトプット模写としてZennさんのページを参考に模写コーディングをしています。
そこで上記画像のようにレイアウトしたく作成していたのですが、自分のコードでこちらを再現できませんでした。
色々試してみたのですが、どんなCSSをあてたらいいのか分からなくなってしまいました。

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

エラーメッセージはありませんが下記画像のような表示になっています。

該当のソースコード

index.html

1 <div class="profile_container"> 2 <a href="https://zenn.dev/zenn"><img src="images/9965dabc76.jpeg" alt="zennのアカウントロゴ"></a> 3 <div class="profile_info"> 4 <a class="account_name" href="https://zenn.dev/zenn"> 5 <span>Zenn公式</span> 6 </a> 7 </div> 8 9 <div class="profile_introduction"> 10 <p>Zennの使い方や開発状況を発信する公式アカウントです。</p> 11 <div class="sns"> 12 <span>フォロー</span> 13 <a class="ProfileCard_link__jGmrk" href="https://github.com/zenn-dev"><i class="fa-brands fa-github"></i></a> 14 <a class="ProfileCard_link__jGmrk" href="https://twitter.com/zenn_dev"><i class="fa-brands fa-twitter"></i></a> 15 </div> 16 </div> 17 </div> 18 </div> 19

style.css

1.profile_container { 2 display: flex; 3 padding-top: 32px; 4} 5 6.profile_container img { 7 width: 60px; 8 height: 60px; 9 border-radius: 50px; 10} 11 12.profile_container .account_name { 13 text-decoration: none; 14 color: #000000d1; 15 font-size: 18px; 16 font-weight: 600; 17} 18 19 20.profile_introduction { 21 display: inline; 22} 23

現段階でのCSSはこちらになるのですがどこをどうなおしたらいいのか検討つかずです。
ほとんど間違っていると思います。

試したこと

模写なので基本的には禁止ですが、ディベロッパーツールで確認してみました。
しかしクラス名がかなり複雑で読み取ることが困難でした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

今後の制作のヒントが欲しいのでご教授いただきたいと思います。
よろしくお願いいたします。