Ribbon across container in Bootstrap 3 not working - css

Question

I'm not quite sure what I'm doing wrong here.
I'm trying to apply a ribbon across a container using the example on this site:
http://www.andreapinchi.it/css3-ribbon-effect/
I've created a mock-up of the problem here:
http://jsbin.com/rebexatijizi/1/edit
Doesn't look much like the other. :(
*NOTE: JSBIN link updated above to show current status.

Answer 1

DEMO: http://jsbin.com/tibaqenawena/4/edit
CSS:
.ribbon, .ribbon:before, .ribbon:after {box-sizing:content-box;}
You can also just adjust the math in your css to include padding and borders. DEMO: http://jsbin.com/dupac/1/edit
div.both_ribbon::before{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
left: -2px;
content: "";
border-bottom: 10px solid transparent;
border-right: 10px solid rgb(0, 80, 116);
}
div.both_ribbon::after{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
right: -2px;
content: "";
border-bottom: 10px solid transparent;
border-left: 10px solid rgb(0, 80, 116);
}
Also, your css is messed up and it still is, you have a enclosed a style within another style.

Answer 2

Your box-sizing properties seem to be messing everything up. In bootstrap.css remove the box-sizing rules. Also, take the padding off of your container (you can add another child element within your container that has padding instead). Here is the code you should remove:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}