Javascript 从网格偏移Div

在上面，你会看到我试图实现的目标的草图。我在一个12列的布局中工作。我希望div.row-2在右边最多有10列，但一直到左边的.main容器的边缘

下面是我必须处理的问题，但不断出现错误

$（'.main container'）。一次（'.row-2'）。每个（函数（）{
$（窗口）.on（'resize'，函数（）{
$（'.row-2'）。每个（函数（）{
self.align（$（this））；
});
});
});
$（文档）.ready（函数（）{
$（'.row-2'，context）。一次（'.row-2'）。每个（函数（）{
self.align（$（this））；
});
});
对齐：函数（$element）{
$element.css({
marginLeft:'
});
var maxWidth=$element.width（）；
$element.css({
marginLeft:“自动”
});
$（'.row-2'，$元素）。每个（函数（）{
$（this.css）({
maxWidth:maxWidth，
marginLeft:“自动”
});
});
var offset=$element.offset（）；
//使用#焦点元素作为包装元素
offset.left=offset.left-$（'.main container'）.offset（）.left；
$element.css({
marginLeft：（offset.left*-1）+“px”
});
};
.main容器{
最大宽度：1680px；
宽度：100%；
高度：1000px；
保证金：0自动；
背景色：#中交；
}
.第1行、第2行、第3行{
背景色：#F4；
宽度：1000px；
保证金：0自动；
高度：100px；
边缘底部：25px；
}


[这是和你说的中心相同的图像。你知道显示中心是因为你没有调整窗口大小][检查这个img]

哦，天哪。帮你自己一个忙，去拿！你可以做偏移。@ StPiangnyyk我用的是基金会6。我正在尝试将div偏移到视口的边缘。@StephanGenyk，即使我不使用.columns类，这样在调整浏览器大小时，.row将变为全宽，而不会与.row-1和.row-2保持一致。这是我的建议。第1行和.3行应使用一个具有样式的类进行包装，该样式包括最大宽度：1680px和边距：0 auto。第2行应该用另一个类包装，样式为宽度：100%@StephanGenyk我希望第1行和.3行留在我的.container中。当然，我可以做到。第2排100%宽度，但如何在网格中阻止它？这并不能使第2排的左侧和右侧一直处于最大值。我几乎100%肯定这不是通过CSS就能实现的。检查我上面的评论和截图。
Here, working example please check below link.

I have set .row-2 in same container but take different css for .row-2 and .row-1 & .row-3

and .row-2 take 10 columna same you need please check it  

https://jsfiddle.net/DineshV/frp1Luzo/