Html 使div的宽度不达到页面的末尾

所以我正在制作一个Flask web应用程序，我有一个导航条。此导航栏的背景色可到达页面的水平两端。我如何更改此设置，使背景颜色仅位于内容后面？任何帮助都将不胜感激

Html:

---

这就是你想要做的吗

我只是在导航栏中添加了以下代码：

display: block; <!--convert div to block element-->
max-width: 90%; <!--make div 90% width of container -->
margin: 0 auto; <!--center the div -->

{%block head%}{%endblock%}
主页
使用者
*{
    margin:0;
    padding:0;
}
html{
    background-color: thistle;
}
.navBar{
    background-color: darkslategrey;
}
#flex-container{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    flex-direction: row;
    border-radius: 13px;
    position:relative;
}   
.navButton {
    padding:10px 20px;
    margin:8px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border: none;
    box-shadow: rgb(133, 131, 131) 3px 3px;
    
}
.navButton:hover{
    box-shadow: rgb(104, 101, 101) 5px 5px;
}

display: block; <!--convert div to block element-->
max-width: 90%; <!--make div 90% width of container -->
margin: 0 auto; <!--center the div -->