リストを綺麗に整列したいのですがうまくいきません・・・

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

一番上のリストはwidth:100%;で横幅をいっぱいにし、
残りのリストは縦２列でテキストをたくさん入れた際、ウィンドウ幅に合わせて高さ可変したいのですが
3つ目のリストに隙間ができるので改善方法をどなたか教えていただけませんでしょうか？

エラーメッセージ

該当のソースコード

html

<header> <div class="contents-menu"> <ul class="menu-bar"> <li class="list">menu</li> <li class="list">menuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li> <li class="list">menu</li> <li class="list">menu</li> <li class="list">menu</li> </ul> </div>

</header>

css

.menu-bar {
letter-spacing: -0.5rem;
width: 100%;
vertical-align: middle;
}

.list {
display: inline-block;
background:#8A8A8A;
border: 1px solid #000;
color: #fff;
text-align: center;
vertical-align: bottom;
width: 50%;
height: 100%;
max-height: 200px;
padding: 50px;
letter-spacing: normal;
word-wrap:break-word;
overflow: hidden;

}

.list:first-child {
width: 100%;
}

ソースコード
```HTML CSS

### 試したこと

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

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

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

kei344

2018/07/05 14:22

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、質問テンプレートの文字列が残ってしまっていますので、不要な部分は削除してください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

yoshinavi

2018/07/07 00:37

確認された各種ブラウザ（Chrome、Firefox、IE等）は、HTMLのタグに独自のスタイル設定値があります。どのブラウザでも同じようにリセットする必要がありますので、「CSS　リセット」等で検索してみてください。また、タグ内のコンテンツの「width（幅）」は、どこを指すのかを「CSS　ボックスモデル」等で検索してみてください。