Grid system extra space right side

I am trying to make a grid system using jquery masonry. But i have space problem.

I crated this DEMO from codepen.io

If you are using a widescreen computer please narrow browser. When you narrow your browser then a large gap on the right side emerges. Anyone can help me about that problem ?

HTML

<div class="kesif-wrp">
 <div class="kesif-alani">
   <div class="kesif-gonderiler">
     <div class="posts-holder">
     <div class="kesif-gonderi-alani" style="height:300px;">1</div>
     <div class="kesif-gonderi-alani" style="height:400px;">2</div>
     <div class="kesif-gonderi-alani" style="height:400px;">3</div>
     <div class="kesif-gonderi-alani" style="height:200px;">s4</div>
     <div class="kesif-gonderi-alani" style="height:250px;">5</div>
     <div class="kesif-gonderi-alani" style="height:150px;">6</div>
     <div class="kesif-gonderi-alani" style="height:200px;">7</div>
     </div>
   </div>
 </div>
</div>

CSS

body {
    background-color:#323949;
    font-family: 'mstfont' !important;
    margin: 0px ;
    padding: 0px;
    min-width:100%;
    float:left;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
  background-color:blue;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
padding: 0 10px;
  background-color:red;
}
.kesif-gonderi-alani{
  width:300px;
  background-color:#ffffff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -o-border-radius:3px;
  -moz-border-radius:3px;
  margin-right:20px;
  margin-bottom:20px;
  position: absolute;
top: 0px;
left: 0px;
}
.posts-holder {
  box-sizing: border-box;
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
}