父级背景颜色在右侧和底部显示，子级宽度和高度均为100％

Question

我有3个问题：

1. 我可以看到其子级下面的父级白色背景底部（有时是右侧）的一部分，其宽度和高度为100％（请参见屏幕截图中的绿色箭头）

2. 孩子的宽度设置为100％，但当我检查时宽度大于父母的宽度（请参见屏幕截图上的红色箭头）

3. 我的行高是line-height:30px;和我的font-size:30px;，但是文本顶部和底部的间距不同（请参见屏幕截图中的蓝色箭头）。这使我无法正确地使文本垂直居中

注意：我的浏览器缩放比例为100％

提琴：https://jsfiddle.net/gr85n2es/