如何使用css第n项创建流体盒响应性浮动

我试图通过使用第n个术语的方框实现流畅无缝的响应布局

我想要实现的确切布局是

我遇到的问题是使方框浮动在一起，最后一个方框上没有右边距。调整浏览器大小时，框的浮动需要保持不变

请看我的小提琴。如果你能帮忙，我将不胜感激

---

因此，与dribble.com的例子不同，你需要盒子保持4到一条线？希望它像dribble的例子一样。响应屏幕大小最终更改为仅显示两个框

 .box {

     position: relative;

     background: red;

     -webkit-border-radius: 3px;

     -moz-border-radius: 3px;

     border-radius: 3px;

     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);

     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);

     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);

     width: 21.3%;

     height: 200px;

     float: left;

     padding: 10px;

     margin-right:20px;

     ;

     margin-bottom:20px;

 }

 .box:nth-of-type(4n) {

     margin-right:0

 }

 @media screen and (max-width: 1002px) {

     .box:nth-of-type(4n) {

         margin-right:0

     }