The box-shadow should appear inside the border on the right

I'm trying to achieve a drop shadow inside the right border, everything is working fine for now, except that the shadow gets displayed outside the right border. Below is a sample js fiddle example code I tried ... http://jsfiddle.net/5y1guk6d/1/

HTML:

    <div class="header">
    <div class="header-bar">
        <h1 class="title">Page title</h1>
    </div>
</div>
<div class="main">
    <div class="left-bar">
        <div class="menu">
             Menu Content
        </div>

    </div>
    <div class="content">
        Main content area
    </div>
</div>

      

        
        
        
      

    

CSS

.header {
    width: 100%;
    height: 40px;
    top: 0;
    color: white;
}
.header-bar {
    height: 100%;
    overflow: hidden;
    background-color: #009BE1;
}

h1.title {
    display: inline-block;
    font: bold 16px Arial, sans-serif;
    margin: 0 5px 0 15px;
    position: relative;
    top: 25%;
}
.main {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 48px;
    bottom: 0;
}

/* left bar */
.left-bar {
    width: 160px;
    float: left;
    padding:10px;
    background-color: #F0F0F0;
    height: 100%;
    position: relative;
    border-right:1px solid #aaa;
    box-shadow:5px 0 5px #ccc;
}
.content {
    overflow: hidden;
    left: 12px;
    padding: 5px 17px 5px 5px;
    height: 100%;
    position: relative;
}

      

        
        
        
      

    

Appreciated your help.