Ribbon Overflow Effect Issue

I’m creating a custom theme in wordpress. I have found up a code to get a ribbon effect around the titles of items on the sidebar. However, the ribbons aren’t quite flowing over the edges of the sidebar, instead they’re in the middle of the sidebar and when I float the title right, part of the ribbon gets hidden. I’ve been playing around with it with the google chrome “inspect element” aspect, but can’t quite to seem to get it working. What should I do? Link of site here: gamedaymeetup.com

    h1.widget-title {
    text-align: center;
    position: relative;
    color: #fff;    
    margin: 0 -30px 30px -30px;
    padding: 10px 0; 
    text-shadow: 0 1px rgba(0,0,0,.8);
    background: #5c5c5c;
    background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 0 rgba(0,0,0,.3);

}

h1.widget-title:before, h1:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
    bottom: -10px;
}



h1.widget-title:after
{
    border-width: 0 0 10px 10px;
    border-left-color: #222;
    right: 0;
}

and here’s the sidebar sytling

#sidebar {
text-align: left;
display: block;
padding: 9px;
float: right;
width: 246px;
height: 100%;
font-family: "Gotham SSm A", "Gotham SSm B", Arial, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: .2px;
background-color: #FFF;
background-position: bottom;
color: #000;
border-left-width: 1px;
border-left-style: inset;
border-left-color: #C3C3C3;

}