Right side wrap for ribbon does not vertically align - css

Question

I'm attempting to make a ribbon for a navbar using bootstrap and my own CSS work. I have the majority of what I need finished, however I cannot seem to make the right side of the ribbon align with the navbar.
(colors purposefully bad to make the example obvious)
Here's an example of my situation: JSBin example
CSS:
nav.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 5px -5px rgba(0, 0, 0, 0.075);
box-shadow: none;
}
div.ribbon-left {
left: -13px;
float: left;
width: 13px;
border-right: none;
}
div.ribbon-right {
width: 13px;
float: right;
right: -13px;
border-left: none;
}
div.ribbon-left, div.ribbon-right {
position: relative;
/*background: linear-gradient(to bottom, #fff 0, #f8f8f8 100%) repeat-x;*/
background: white;
height: 100%;
min-height: 52px;
border: 1px solid transparent;
}
div.ribbon-top-back {
z-index: -10;
border-color: transparent transparent #f0f0f0 transparent;
border-style: solid;
border-width: 13px;
height: 0px;
width: 0px;
position: relative;
left: -1px;
top: -27px;
}
div.ribbon-right > div.ribbon-top-back {
left: -14px;
}
/* Temporary coloring to make things obvious */
body {
background-color: blueviolet;
}
.container {
background-color: #c0a16b;
}
html, body, div.container {
height: 100%;
}
A general idea of the ribbon layout:
<div class="row">
<div class="ribbon">
<div class="ribbon-left">
<div class="ribbon-top-back"></div>
</div>
<div class="ribbon-content">
<!-- bootstrap navbar -->
</div>
<div class="ribbon-right">
<div class="ribbon-top-back"></div>
</div>
</div>
</div>
How can I make the element align correctly?

Answer 1

So after some testing, it became apparent that if I wanted the element to be in-line, I would need to declare it before the navbar (seeing as it's relative positioning but float: right):
<div class="row">
<div class="ribbon">
<div class="ribbon-left">
<div class="ribbon-top-back"></div>
</div>
<div class="ribbon-right">
<div class="ribbon-top-back"></div>
</div>
<div class="ribbon-content">
<!-- bootstrap navbar -->
</div>
</div>
</div>