Ломается сайт, что исправить (псевдоэлементы сдвигаются на единицу)?

возле единицы есть два псевдоэлемента
вот они и сдвигаются к цифре
проблема перед переходом на мобильную версию

на скриншоте нарисовала стрелку

olya_097,
элементам задаете позиционирование слева 0 справа 0
padding:0 30px(размер элемента + небольшой отступ)
короче не правильно верстаете

Andrey, так а как правильно?

<div>
<span>№1</span>
</div>

div{text-align:center;}
span{padding:0 20px; position:relative;}
span:before{position:absolute; right:0; top:50%; height:1px; width:10px; background:#FFF; content:"";}
span:after{position:absolute; left:0; top:50%; height:1px; width:10px; background:#FFF; content:"";}

как то так

Andrey, а где у меня не правильно то? я также, как и Вы пишу

по такому же алгоритму

какая разница что я задаю всё в пикселях, а Вы top:50%; в процентах?

olya_097,
как то так
https://codepen.io/deignerandrey/pen/MzmqWr
проблема в том, что вы не правильно задаете позиционирование для элементов

Andrey, так а что именно в моем коде исправить? что добавить/убрать?

Andrey, и я извиняюсь, в какой строчке padding:0 30px? я не нашла

у вас задано позиционирование от параграфа
параграф p идет во фсю ширину что не есть правильным, размер шрифта и сам шрифт может колебаться в зависимости от браузера и os
используйте для этого span
ему вы задаете отступы от левого края и правого напр. по 20px
и ширину псевдоэлемента напр. 10px
то есть, псевдоэлементы уже не наедут на текст в spane

olya_097, 20px поставил
можете ставить свои значения
это отступ спана по краям
т.е напр. 10px размер элемента и + еще расстояние 10px = 20px

Andrey, извините, но я так и не услышала, где неправильно верстаю
использую p, а не span?

Andrey, если интересно, то решила проблемы
добавила img {
max-width: 100%;
height: auto;
}

так такая верстка имеет право на жизнь? ведь все ок теперь