Html CSS全宽度居中导航栏

我想在CCS3/HTLM5中得到这个

             | Header ....                  |
=====Blue bar| Navbar. Menu1. Menu2 ...     |Blue bar========
             | Website leftSide and content |
             | Footer                       |

菜单和内容都居中。问题在于菜单右侧和左侧的2个“蓝色条”。我不知道如何在CSS中绘制它们。它们的高度应与导航栏的高度相同

以下是HTML：

    <div id="wrapper">

    <header id="header">
        Image + Login
        <br /><br /><br />

        <div id="nav">
            <ul id="nav">
              <li id="nav-accueil"><a href="#">Accueil</a></li>
              <li id="nav-coursATelecharger"><a href="#">Cours</a></li>
              <li id="nav-coursPrives"><a href="#">Cours</a></li>
              <li id="nav-coursEnGroupe"><a href="#">Cours</a></li>
              <li id="nav-contact"><a href="#">Contact</a></li>
            </ul>
        </div>
    </header><!-- #header-->

    <section id="middle">

        <div id="container">
            <div id="content">

            </div><!-- #content-->
        </div><!-- #container-->

        <aside id="sideLeft">

        </aside><!-- #sideLeft -->

    </section><!-- #middle-->

    <footer id="footer">
    </footer><!-- #footer -->

</div><!-- #wrapper -->

我怎样才能让我的960px网站完全居中，并在菜单旁边有2个“蓝色条”

---

感谢您的阅读和愉快的编码

我想这就是我解决问题的方法。您需要将标题放在包装器的外面。然后将父背景和ul设置为不同的颜色

范例

nav {
    width:100%;
    background:blue;
}
nav ul {
    width:100%;
    max-width:960px;
    list-style-type:none;
    display:block;
    margin:0 auto;
    background:rgba(255,255,255,0.5);
}

演示

---

导航是否需要固定？解决这一问题的方法是在包装器外添加标题：）我将在一个部分中为您编写JSFIDLE非常感谢您的回答！实际上，除了菜单栏外，整个站点都是以960px为中心的，菜单栏的每一侧有2个蓝色条（与菜单的高度相同）。

nav {
    width:100%;
    background:blue;
}
nav ul {
    width:100%;
    max-width:960px;
    list-style-type:none;
    display:block;
    margin:0 auto;
    background:rgba(255,255,255,0.5);
}