固定导航的位置100％

Question

请帮我修理我的内部div或导航而不是从容器中消耗掉。以下是我的代码，其中我有一个容器64em，它位于屏幕中间。一旦滚动顶部我的标题消失，导航将固定在顶部0.但在我的情况下导航是100％，它扩展到右侧。

html, body{margin:0; padding:0; width:100%;}
.container{width:64em; margin:0 auto; background:#F5FFDA; position:relative;}
.container header{width:100%; height:80px; background:#EFFDB9;}
.container nav{ display:block; width:100%; height:60px; background:#C5FFF8;}
.container section{height:1200px; background:#FFCC5E;}

$(document).ready(function(e) {
    var headerheight = $('.container header').height();
    $(window).scroll(function () {
        if ($(window).scrollTop() > headerheight) {
            $('.container nav').css({position: "fixed", top: "0px", display: "block"});
        } else {
            $('.container nav').css({position: "relative", top: "0px"});
        }
    });
});

请咨询

<div class="container"> 
    <div class="wrapper">
        <header>header</header>
        <div id="content">
            <nav>navigation</nav>
            <section>section</section>
        </div>
    </div>
</div>