添付画像のようにメインビジュアルの左に余白をあけ、そこにテキストを入れたいと考えています。

・問題解決するために試したこと

以下のcssコードを追加、修正しました。メインビジュアルは問題なく余白をあけ右寄せにすることができましたが、問題ははみ出した部分のテキストが切れてしまい、表示されません。

.p-mainVisual {
    /* overflow: hidden; */
    position: relative;
    width: 70%;
    margin-left: auto;
}


.p-mainVisual__textLayer>.p-blogParts {
    margin: 1em 0 0;
    text-align: left;
    position: absolute;
    left: -140px;
    background: red;
    z-index: 100;
}

overflow: hiddenもOFFにしてみましたが、変わらずでした。cssの指定でなにか足りない、もしくは追加する必要があるのでしょうか。

ローカルでお客様サイト開発中のため、参考になるURLのご提示ができないため、お答えにくくなってしまい申し訳ありません。