Съезжает вёрстка в мобильной версии (псевдоэлемент)
Помогите, пожалуйста, разобраться, почему в мобильной версии съезжают разделения и наезжают на надписи. При просмотре с ПК все ок.
Разделения задал псевдоэлементами css, код которых привожу ниже.
.section-header-container {
width: 100%;
position: relative;
}
.section-header-container::before {
position: absolute;
content: "";
width: 18%;
height: 1px;
top: 50%;
background: #C2C2C2;
}
.section-header-container::after {
position: absolute;
content: "";
width: 74%;
height: 1px;
top: 50%;
background: #C2C2C2;
right: 0;
}