fit-content以外ではみ出る部分を隠す、またはネガティブマージンを効かせる方法

Question

実際のサイト
https://sirinova.com/sirius-css-tag.html

画像上にテキストを表示しているのですが、背景色をはみ出さいないように fit-contentを指定するとネガティブマージンで中央からずれてしまいます。

fit-content以外に（spanに対してのスタイル指定で）背景色をはみ出さないようする方法、またはネガティブマージンを効かせる方法を教えてください。

参考

テキストの背景色がはみ出ないようwidth: fit-contentを指定して、はみ出ないようにしています。

すると@media screen and (max-width: 767px)時のネガティブマージでセンタリングされず左側に寄ってしまいます。

コード

画像上にspanでテキストを表示しています。

<p class="txt-img timg-l">
<img src="./img/sirius-ec.png" alt="">
<span>CSS独自タグ一覧</span>
</p>

!important;の多さにはお目こぼしください。

@media screen and (max-width: 767px) {
.txt-img[style*="float"] {
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
}
.imgtext, .txt-img[style*="float"] {
    position: relative;
    overflow: hidden;
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
}
.txt-img[style*="float"] span {
    position: absolute;
    font-size: 4.0rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    padding: 50% 5%;
    text-shadow: 0 0 10px rgba(0,0,0,0.35);
    color: #fff;
    background-color: rgba(0,0,0,.35);
}

Answer 1

以下ではどうですか？

@media screen and (max-width: 767px)
#text1 .txt-img[style*="float"] {
    max-width: none !important;
    /* margin-left: -20px !important; */
    /* margin-right: -20px !important; */
}

---

該当箇所の「左右マージン」を取ると、狙いの位置にセンタリングすると思います。

-追記-
再度確認してみたところ「@media screen and (max-width: 480px)」の場合も、同じく左右のマージンが影響していますので、こちらも削除した方が良いと思います。

@media screen and (max-width: 480px)
#text1 .txt-img[style*="float"] {
    /* margin-left: -15px !important; */
    /* margin-right: -15px !important; */
}

Answer 2

importantを付けすぎなので、どれが原因かはわかりませんが、とりあえず幅いっぱいにしたければ下記で出来そうです。

#text1 .txt-img:first-child[style*="float"] > img,
#text1 .txt-img[style*="float"] {
	width: 100vw !important;
}

Comments

[snof]

ありがとうございます。問題なくできました。