要素同士を横並びにするにはどうすればいいかについて

前提・実現したいこと

2つの半分のラッパーが並んでいるようにしようとしています。
ラッパーはスペースの半分を使用しますが、右に使われてない余白が残ります
なぜか2番目のラッパーは最初のラッパーに入ってしまうのもわかりません

色々試しているところですがわからないので知恵をお貸しください

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

.Wrapper {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 50%;
  border: 1px solid black;
  background-color: purple;
}

<section class="Wrapper">
  <h1 class="title">Test Title</h1>
  <div class="honbun">
   サンプルテキスト
  </div>
</div>
<section class="Wrapper">
  <h1 class="title">Test Title</h1>
  <div class="honbun">
  サンプルテキスト
  </div>
</section >

行動規範の内容に同意します

回答1件

ベストアンサー

inline-flex を使用する (動作確認用リンク) か、 flex コンテナの親要素へ flexbox を適用してください (動作確認用リンク)。

HTML
1<section class="Wrapper"> <h1 class="title">Test Title</h1> <div class="honbun"> サンプルテキスト </div></section><section class="Wrapper"> <h1 class="title">Test Title</h1> <div class="honbun"> サンプルテキスト </div></section>

CSS
1.Wrapper {
2  display: inline-flex;
3  box-sizing: border-box;
4  flex-direction: column;
5  width: 50%;
6  border: 1px solid black;
7  background-color: purple;
8}

HTML
1<div class="container">
2  <section class="Wrapper">
3    <h1 class="title">Test Title</h1>
4    <div class="honbun"> サンプルテキスト </div>
5  </section>
6  <section class="Wrapper">
7    <h1 class="title">Test Title</h1>
8    <div class="honbun"> サンプルテキスト </div>
9  </section>
10</div>

CSS
1.container {
2  display: flex;
3}
4
5.Wrapper {
6  display: inline-flex;
7  box-sizing: border-box;
8  flex-direction: column;
9  width: 50%;
10  border: 1px solid black;
11  background-color: purple;
12}