ブートストラップ4 - 固定マージンを持つスティッキーNavbar

私は0.5em margin-topを持つnavbarを実装しようとしています。現時点では（このcodepenを見てください：https://codepen.io/diegomengue/pen/yXboQg）、ページをスクロールすると余白がなくなります。マージンをナビバーに付ける方法はありますか？ブートストラップ4 - 固定マージンを持つスティッキーNavbar

私は、ブートストラップ使用している4.

コード：

HTML: 
<body> 
    <nav class='navbar navbar-toggleable-xl mx-auto sticky-top'> 
    <ul class='navbar-nav mx-auto'> 
     <li class='nav-item'><a href='#'>Sobre mim</a></li> 
     <li class='nav-item'><a href='#'>Portfólio</a></li> 
     <li class='nav-item'><a href='#'>Contato</a></li> 
    </ul> 
    </nav> 
</body> 

CSS: 
body { 
    height: 1000px; 
} 
.navbar{ 
    margin-top: 0.5em; 
    background-color: #4B589D; 
    width: 87%; 
    border-radius: 3px; 
    box-shadow: 0 0 10px grey; 
} 

li { 
    padding: 0.3em 0.3em 0.3em 0.3em; 
    margin: 0 0.3em 0 0.3em; 
} 

a { 
    color: white; 
}

はどうもありがとうございました！

出典

2017-06-20 Diego Mengue