skew で斜めに傾けた画像を並べると細い隙間ができてしまう

skew で画像を傾けて　４枚並べています

すると、marginやpaddingをとっていないのに細い隙間が出来てしまいます。

どうすれば隙間がなくなるのでしょうか？

試した事
li に
margin:0;
padding:0
を設定したけど駄目でした。

下記はcodepen のURLです

<section id="classes">
<div class="content">
<h2 class="section-title color-white">
  <span class="en">CLASSES</span><!-- /.en -->
  <span class="ja">クラス紹介</span><!-- /.ja -->
   </h2><!-- /.section-title -->
   <ul class="class-box-list">
    <li class="bg-kid-class">
     <h3 class="class-name">キッズクラス</h3></li>
    <li class="bg-beginner-class">
     <h3 class="class-name">初心者クラス</h3>
    </li>
    <li class="bg-general-class">
     <h3 class="class-name">一般クラス</h3>
    </li>
    <li class="bg-lady-class">
     <h3 class="class-name">女性クラス</h3>
    </li>

   </ul>














</div><!-- /.content -->





</section><!-- /#classes -->


/*-------------------------------------------
classes
-------------------------------------------*/

#classes .content{
 position: relative;
height:500px;
width:1440px;
background-color: #F75E5E;
}



#classes .content .section-title{
 position:absolute;
 top:50px;
 left:30px;
 z-index:5;
}

#classes .class-box-list{
 position: absolute;
}

#classes .class-box-list li{
 width:280px;
 height:500px;

 display:inline-block;
 transform:skewX(-20deg);

  overflow:hidden;
}
#classes .content .class-name{
 font-size: 1.5rem;
    font-weight: bold;
    width:100%;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
        transform: skewX(20deg);
}



#classes .class-box-list li::before{
 content: "";
    position: absolute;
      z-index: -1;
 background-color:rgba(0,0,0,.5);
            width:280px;
      height:500px;
}




.bg-kid-class{
 background:url("https://placeimg.com/280/500/animals");
  transform:skewX(20deg);
}
.bg-beginner-class{
 background:url("https://placeimg.com/280/500/arch")
}
.bg-general-class{
 background:url("https://placeimg.com/280/500/nature")
}
.bg-lady-class{
 background:url("https://placeimg.com/280/500/people")
}