CSS　ブロック要素をインラインにしたい

### CSS　ブロック要素をインラインにしたい

2段の見出しを作り・たいのですが、二段目のタイトルの位置が中途半端なところにきてしまいます。

実現したいこと

二段の見出しを作りたい

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

二段目のタイトルが始まる位置を指定できない![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-29/f95daaa3-8cbb-42ed-874a-0fc60fc92f8e.png)
``

### 
・html （headは省略しています）

<div class="nemu-bar" style="border: solid 1px red;">
      menu bar
    </div>

    <div class="Section">
      <h2>Section1</h2>
      <div class="header" style="border: solid 1px red;">
        header1
      </div>
      <div class="header" style="border: solid 1px red;">
        header2
      </div>
      <div class="header" style="border: solid 1px red;">
        header3
      </div>
    </div>


    <div class="Section">
      <h2>Section2</h2>
      <div class="header" style="border: solid 1px red;">
        header1
      </div>
      <div class="header" style="border: solid 1px red;">
        header2
      </div>
      <div class="header" style="border: solid 1px red;">
        header3
      </div>
    </div>



```css
body {
  margin: 0;
  padding: 0 30px;

}
.nemu-bar {
  width: 100%;
  height: 100px;
}

.header {
  text-align: center;
  float: left;
  width: 25%;
  height: 300px;
}

試したこと

ここに問題に対して試したことを記載してください。

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

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

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

回答1件

ベストアンサー

想定する結果イメージがわからないのでなんですが
この手の処理をfloatデザインするのはちょっと古いかも

css
1<style>
2.section{
3display:flex;
4  flex-wrap:wrap;
5}
6.section h2{
7width:100%;
8}
9.header{
10width: 25%;
11  height: 300px;
12}
13</style>
14<div class="nemu-bar" style="border: solid 1px red;">
15      menu bar
16    </div>
17
18    <div class="Section">
19      <h2>Section1</h2>
20      <div class="header" style="border: solid 1px red;">
21        header1
22      </div>
23      <div class="header" style="border: solid 1px red;">
24        header2
25      </div>
26      <div class="header" style="border: solid 1px red;">
27        header3
28      </div>
29    </div>
30    <div class="Section">
31      <h2>Section2</h2>
32      <div class="header" style="border: solid 1px red;">
33        header1
34      </div>
35      <div class="header" style="border: solid 1px red;">
36        header2
37      </div>
38      <div class="header" style="border: solid 1px red;">
39        header3
40      </div>
41    </div>