質問: 添付画像において、「作品タイトル」の横にリストメニューを画面一杯に横並びで配置したいのですが 紫色と灰色の箇所が重なっており横並びになりません。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/721a15dd94f0de940d7e0a1bab092138.png) ``` ストーリー 世界観 キャラクター システム スクリーンショット 製品情報 ``` ``` h1{ /* TOPの作品タイトルアイコン */ width: 20%; float:left; background-color: #aaf; } ul{ /* ナビゲーションメニュー */ width: 80%; float:right; display:flex; list-style:none; background-color: #aaa; } li{ background-color: #faa; } ``` 重なっている箇所はulの背景色です。 原因が分かりましたら教えていただきたいです。
回答: ``` h1{ /* TOPの作品タイトルアイコン */ width: 20%; float:left; background-color: #aaf; margin: 0; /* ADD */ } ul{ /* ナビゲーションメニュー */ /*width: 80%;*/ /*float:right;*/ display:flex; list-style:none; background-color: #aaa; margin: 0; /* ADD */ padding: 0; /* ADD */ } li{ background-color: #faa; } /* ADD */ nav { float: left; width: 80%; } ``` **動くサンプル:** 【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】 【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp ... 技術評論社】