Css 为什么child div会稍微向右移动？

网格4底部的矩形框应为绿色，但似乎略微向右移动并重叠。我做错了什么

.sellerdiv{
底部：0；
文本对齐：居中；
位置：绝对位置；
宽度：100%；
身高：12%；
背景色：rgba（0,255,0,2）；
}
塞勒皮克先生{
宽度：11%；
位置：绝对位置；
边界半径：80px；
}
}
.容器{
宽度：96%；
保证金：30像素自动；
填充：0自动；
浮动：无；
文本对齐：居中；
显示：内联块；
}
.grid_4{
显示：内联块；
宽度：28%；
利润率最高：15；
左边距：10px；
右边距：10px；
高度：400px；
垂直对齐：顶部；
填充顶部：6px；
左侧填充：6px；
右边填充：6px；
位置：相对位置；
光标：指针；
背景色：#f1f1；
边界半径：3px；
}
.OverlyName{z-index:3；颜色：#ffffff；
左：4%；
字体大小：22px；
位置：绝对位置；
字体系列：helvetica；
最高：5%；
填充：3px 8px 3px 8px；
背景：rgba（0,0,0,65）；
}
.覆盖层{z-指数：3；颜色：#ffffff；
左：4%；
字体大小：12px；
位置：绝对位置；
最高：33%；
字体系列：helvetica；
填充：3px 8px 3px 8px；
背景：rgba（0,0,0,5）；
}
.profilepic{
保证金：40px 0px 0px 0px；
边框：7px纯白；
边界半径：70px；
}
塞勒尔迪夫先生{
底部：0；
文本对齐：居中；
位置：绝对位置；
宽度：100%；
身高：12%；
背景色：rgba（0,255,0,2）；
}
塞勒皮克先生{
宽度：11%；
位置：绝对位置；
边界半径：80px；

考试题目
测试价格
描述

Lorem ipsum dolor sit amet，奉献精英

Lorem ipsum dolor sit amet，奉献精英

只要给你的

.sellerdiv

一个

左：0；

样式就可以了

.sellerdiv {
    ...
    left: 0;
}

这是

这是全部代码

.sellerdiv{
底部：0；
文本对齐：居中；
位置：绝对位置；
宽度：100%；
身高：12%；
背景色：rgba（0,255,0,2）；
}
塞勒皮克先生{
宽度：11%；
位置：绝对位置；
边界半径：80px；
}
}
.容器{
宽度：96%；
保证金：30像素自动；
填充：0自动；
浮动：无；
文本对齐：居中；
显示：内联块；
}
.grid_4{
显示：内联块；
宽度：28%；
利润率最高：15；
左边距：10px；
右边距：10px；
高度：400px；
垂直对齐：顶部；
填充顶部：6px；
左侧填充：6px；
右边填充：6px；
位置：相对位置；
光标：指针；
背景色：#f1f1；
边界半径：3px；
}
.OverlyName{z-index:3；颜色：#ffffff；
左：4%；
字体大小：22px；
位置：绝对位置；
字体系列：helvetica；
最高：5%；
填充：3px 8px 3px 8px；
背景：rgba（0,0,0,65）；
}
.覆盖层{z-指数：3；颜色：#ffffff；
左：4%；
字体大小：12px；
位置：绝对位置；
最高：33%；
字体系列：helvetica；
填充：3px 8px 3px 8px；
背景：rgba（0,0,0,5）；
}
.profilepic{
保证金：40px 0px 0px 0px；
边框：7px纯白；
边界半径：70px；
}
塞勒尔迪夫先生{
底部：0；
左：0；
文本对齐：居中；
位置：绝对位置；
宽度：100%；
身高：12%；
背景色：rgba（0,255,0,2）；
}
塞勒皮克先生{
宽度：11%；
位置：绝对位置；
边界半径：80px；
}

考试题目
测试价格
描述

Lorem ipsum dolor sit amet，奉献精英

Lorem ipsum dolor sit amet，奉献精英

您的JSFIDLE与问题中显示的代码不同