FAQボックスの作り方

Question

模写コーディング中なんですが、左のように囲いをつけて、文字を左配置、囲いボックスを均等に配置する書き方はどのようになるのでしょうか?　いくつか試してみたのですが、思う通りにならなかったのでこちらで質問させていただきました。ご教授お願い致します。

最終的にボタンの開け閉めで解答の表示を切り替えるようにしたいです。試行錯誤した結果、大元のfaq-wrapper部分で左右余白を作り、文字部分をtext-align: leftで左寄せをして、何とか形にはなったかなと思ったのですが、このような感じでいいのでしょうか?

大元に余白部分を作り、囲いボックスの大きさを調整する以外で良い方法があれば教えてもらいたいです。

//HTML//

<div class="faq-wrapper"> <div class="faq-heading"> <h2><span class="far fa-envelope-open"></span>よくある質問</h2> </div> <div class="faq-list"> <div class="faq"> <div class="faq-line"> <h3>プログラミングスキルは必要ですか?<span class="fas fa-angle-down"></span></h3> </div> <p>あああああ<span></span></p> </div> <div class="faq"> <div class="faq-line"> <h3>何の言語を学びますか?<span class="fas fa-angle-down"></span></h3> </div> <p>いいいい</p> </div> <div class="faq"> <div class="faq-line"> <h3>会社辞めたいです<span class="fas fa-angle-down"></span></h3> </div> <p>うううう</p> </div> <div class="faq"> <div class="faq-line"> <h3>人生辞めたいです<span class="fas fa-angle-down"></span></h3> </div> <p>ええええ</p> </div> </div> </div>

//CSS//

.faq-wrapper {
text-align: center;
padding: 0 300px;
}

.faq-heading {
padding: 50px 0;
}

.faq p {
text-align: left;
}

.faq-line {
border: 1px solid silver;
text-align: left;
margin: 10px 0;
}

.fa-angle-down {
float: right;
padding-right: 20px;
}

Comments

[m.ts10806]

どのように試してどのようになったのか提示してください。
https://teratail.com/help/question-tips

[退会済みユーザー]

「css アコーディオン メニュー 縦」でググって出てくる記事でフィーリングが合うものを参考にして真似するけどね。

[m.ts10806]

https://teratail.com/help/question-tips#questionTips3-7

[退会済みユーザー]

コードを示してくれてありがとう、一度編集画面に入って、コード箇所を選択状態にしてから、「CODE」ボタンを押してくれると、もっと読みやすくなるよ。また、今の状態からどういうふうにしたいのか言葉だけで説明しないで、イラストなどで示せないだろうか。

Answer 1

どのようなレイアウトをお望みか不明確ですか、
よくあるレスポンシブ対応、全体を中央寄せのレイアウトなら、
下記のような感じです。

.faq-wrapper {
  text-align: center;
  max-width: 800px; /*最大幅設定*/
  margin: 0 auto;   /*中央寄せ*/
}

上記以外は現状で。