Я пытаюсь создать сайт с меню нижнего колонтитула. И я использую container в своем контенте, так как я не знаю, как сделать его центром. Когда я пытался применить меню нижнего колонтитула без использования container. background-color нижнего колонтитула расширяется вверх, где последний div без контейнера. И текст не будет центрироваться.
Sample
Стало так, когда я использую .mainbar:float:left; и .sidebar:float:right;
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">会社情報</a></li>
<li class="fmenu-item"><a href="#">製品情報</a></li>
<li class="fmenu-item"><a href="#">採用情報</a></li>
<li class="fmenu-item"><a href="#">お知らせ</a></li>
<li class="fmenu-item"><a href="#">サポート</a></li>
<li class="fmenu-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar{
float: left;
width: 736px;
}
.sidebar{
float: right;
width: 214px;
}
#fnav{
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
}
#fnav ul{
display: flex;
list-style: none;
margin: auto;
width: 1000px;
}
#fnav ul li.fmenu-item {
flex-grow: 1;
padding: 10px 0 10px 0;
}
#fnav ul li.fmenu-item a{
color: #262d33;
text-decoration: none;
}
.copyright{
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
}