CSS　floatでリストとほかの要素を100％で横並びに表示したい

添付画像において、「作品タイトル」の横にリストメニューを画面一杯に横並びで配置したいのですが
紫色と灰色の箇所が重なっており横並びになりません。

HTML
1
2<body>
3  <header>
4    <h1>
5      <img src="xxx.png" alt="作品タイトル" />
6    </h1>
7    <nav>
8      <ul>
9        <li class="story">ストーリー</li>
10        <li class="world">世界観</li>
11        <li class="charcter">キャラクター</li>
12        <li class="system">システム</li>
13        <li class="screen">スクリーンショット</li>
14        <li class="product">製品情報</li>
15      </ul>
16    </nav>
17  </header>
18</body>
19

CSS
1h1{ /* TOPの作品タイトルアイコン */
2  width: 20%;
3  float:left;
4  background-color: #aaf;
5}
6
7ul{ /* ナビゲーションメニュー */
8  width: 80%;
9  float:right;
10  display:flex;
11  list-style:none;
12  background-color: #aaa;
13}
14
15li{
16  background-color: #faa;
17}
18

重なっている箇所はulの背景色です。
原因が分かりましたら教えていただきたいです。

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

回答1件

ベストアンサー

CSS
1h1{ /* TOPの作品タイトルアイコン */
2  width: 20%;
3  float:left;
4  background-color: #aaf;
5  margin: 0; /* ADD */
6}
7
8ul{ /* ナビゲーションメニュー */
9  /*width: 80%;*/
10  /*float:right;*/
11  display:flex;
12  list-style:none;
13  background-color: #aaa;
14  margin: 0; /* ADD */
15  padding: 0; /* ADD */
16}
17
18li{
19  background-color: #faa;
20}
21
22 /* ADD */
23 nav {
24    float: left;
25    width: 80%;
26}
27```**動くサンプル：**[https://jsfiddle.net/gnz5thgg/](https://jsfiddle.net/gnz5thgg/)
28
29---
30
31【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
32[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)
33
34【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
35[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)
36
37【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
38[http://gihyo.jp/dev/feature/01/devtools/0001?page=2](http://gihyo.jp/dev/feature/01/devtools/0001?page=2)