宽屏上的css元素移位

Question

我有一个小问题无法回答：

我有两个元素：<div class="lineleft"><h2>Title</h2></div>，我写了一些CSS来叠加两个不同的下划线。为了使我具有相对的父母和绝对的孩子的风格：

.lineleft {
    border-bottom: 0.25rem solid lightgrey;
    padding: -0.2rem 0;
    margin-bottom: 2rem;
    position: relative;
    height: 2.4rem;
}
.lineleft h2 {
    position: absolute;
    bottom: 0;
    font-size: 2.4rem;
    font-weight: 500;
    border-bottom: 0.25rem solid black;
    display: inline-block;
    padding-bottom: 0.25rem;
    margin-bottom: -0.25rem;
}

除了宽屏Firefox之外，每个屏幕上的运行情况都不错，这正常吗？我可以为此做些什么吗？