あるサイトでlinear-gradient、background-sizeを使用してノート風に表示をしようとするとずれて表示されてしまう

Question

初心者です。
https://pictsquare.net/
こちらのサイトでイベントページを作成中です。
linear-gradient、background-sizeを使ってノート風にしたいのですが、文字と線がずれて表示されます。
ブラウザでHTMLを直接開いたときは問題なく表示されるのですが、このサイトに反映させるとダメでした。
コピペでコードをお借りしているのですが複数試してみてもどれもだめでした。
どうすればずれずに表示できるでしょうか？
(該当サイトはインラインCSSしか使用できません)

該当のソースコード

.note1{
  background-color: #ffffff;
  color: #000000;
  margin: 1em 0;
  border: solid 2px #027941;
  padding: 0.3em 1em 2em 1em;
  box-shadow:2px 2px 0 rgba(0,0,0,.1);
  border-radius: 5px;
}
.sen1{
 background-color: #ffffff;
 background-image:
 linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #c2dbd1 100%);
 background-size: 100% 2em;
 line-height: 2em;
 padding: 2em 1em 0.2em 1em;
}

こちらをインラインCSSに変換して

<div class="note1" style="background-color: #fff;color: #000;margin: 1em 0;border: solid 2px #027941;padding: 0.3em 1em 2em 1em;box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);border-radius: 5px">
        <div class="sen1" style="background-color: #fff;background-image: linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #c2dbd1 100%);background-size: 100% 2em;line-height: 2em;padding: 2em 1em 0.2em 1em">
                これは例文です<br>
                これは例文です<br>
                これは例文です<br>
                これは例文です<br>
                これは例文です<br>
                これは例文です
     
      </div>

こちらを使用しています。

試したこと

同じように構築されているもう少し単純な別のコードをお借りしても変わりませんでした。
行間関連をpxで固定すればずれずに表示できたのですが、よくない方法だと思うのでどうにかしてうまく表示させたいです。

Answer 1

該当のサイトで実装したものを見なければわかりませんが、そのサイト上でdiv要素などに別途スタイルが付けられているのではないでしょうか。

手元のHTMLで実装したときと、サイトで実装したときの要素のスタイルを見比べてみることをおすすめします。