spanタグ文字の背景余白を調整したいです

Question

実現したいこと

spanタグ文字の背景余白を調整したいです

発生している問題・エラーメッセージ

見づらくて恐縮ですが
perfectpixelで合わない部分があり困っています（画像参照ください）
つたわる、以降の白い背景部分を縮めたいのですが
paddingやmarginではうまく行きません

該当のソースコード

https://jsfiddle.net/1cua4yhn/

アドバイスいただけると助かります。
よろしくお願いいたします

Answer 1

"、"の部分を選択してみればわかりますが、その文字自体が右側に空白を持っています。
その文字自体をタグで囲んで幅を強制的に縮めればどうでしょう。

        <div class="cover-text">

          <div class="cover-title">
          <span class="top-title">つながる、つたわる<span class="narrow-width">、</span></span>
            <span class="top-title">かなえる</span>
          </div>

span.narrow-width{
   display: inline-block;
   width: 1.3rem;
}

https://jsfiddle.net/7nqmp0gx/

Comments

[chogemi]

確かに"、"は半分が空白ですね！なるほど一文字だけでもwidthを使って微調整できるのは学びでした！
大変助かりました。ありがとうございます。