結論から言いますと、文字を記載したタグに『width : fit-content』を設定することで、親要素の横幅でなく文章の内容の幅に合わせてくれました！

【問題】横幅が親要素と同じになってしまったインライン要素

positionとleftを使って画像の上に文字を持ってきました。以下がコードです。

【HTML】

【CSS】

この時、文字を含むタグはインライン要素で、width設定がされていませんでした。デフォルトではwidth:100%が設定されています。
また、菱形よりも少し右にずらすためにleft:16px