I cannot position the border line correctly

I cannot position the borderline correctly in mobile view. Any recommendations?

This is the borderline. (Pic 1)

Desired output (Pic 2)

My output (pic 3)

This is my code

&__lines {
    &::before {
      content: '';
      display: block;
      background-image: url('/img/title_lines.png');
      width: 1220px;
      max-width: 100%;
      height: 8px;
      margin: 0 auto;
      @include sp {
        background-image: url('/img/title_lines.png');
        background-repeat: no-repeat;
        background-size: 10 0% 7px;
      }
    }
  }