bootstrapを読み込むとulに余白ができる

前提・実現したいこと

サブメニューのulの左に余白が入ってしまいます。

margin:0; padding:0 など試しましたが何も変わりません。

色々試していると、読み込ませたbootstrap
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">を消すと直るので、これが原因みたいなのですが、

bootstrapを読み込ませたまま、この余白を消すにはどうしたらいいでしょうか？

初歩的すぎる質問で申し訳ありませんが分かる方いらっしゃいましたらご教授お願いします。

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

エラーメッセージ

該当のソースコード

HTML

<div class="navi"> <ul class="afterClear"> <li id="mainmenu1"><a href="#">メインメニュー</a></li> <li><a href="#">メインメニュー</a></li> <li><a href="#">メインメニュー</a></li> </ul> </div> <div class="submenu1"> <ul class="afterClear"> <li><a href="#">サブメニュー</a></li> </ul> </div>

CSS

.afterClear:after {
content: "";
display: block;
clear: both;
}
.navi {
background-color: #eee;
height: 60px;
}
ul {
list-style: none;
}
ul li {
float: left;
padding: 20px;
}

.submenu1 {
background-color: azure;
width: 100%;
height: 60px;
}

試したこと

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

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

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

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

回答1件

ベストアンサー

この動作は、 2 つの浮動体が同一ブロック整形コンテキストに所属していることが原因です。もっとも簡単な解決方法は、 ul 要素に対して display: flow-root を適用することです (動作確認用リンク)。

CSS
1.navi {
2  background-color: #eee;
3  height: 60px;
4}
5
6ul {
7  display: flow-root; /* もしくは overflow: hidden など。 */
8  list-style: none;
9}
10
11ul li {
12  float: left;
13  padding: 20px;
14}
15
16.submenu1 {
17  background-color: azure;
18  width: 100%;
19  height: 60px;
20}