Bootstrap 4 - Sticky Navbar mit festem Rand

Ich versuche eine Navbar zu implementieren, die einen 0.5em Rand oben hat. Ab sofort (Sie können diesen Codepen betrachten: https://codepen.io/diegomengue/pen/yXboQg), wenn Sie die Seite scrollen, der Rand fehlt. Gibt es eine Möglichkeit, den Rand mit der Navigationsleiste zu verkleben?Bootstrap 4 - Sticky Navbar mit festem Rand

Ich bin mit Bootstrap 4.

Code:

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; 
}

Thank you very much!

Quelle

2017-06-20 Diego Mengue