オーバーフローの大きい画像：非表示。 Firefoxに集中しないでください

Question

私は水平スクロールバー（A）を取り除こうとしていますが、フッタを変更したときに画像が乱れてしまいました（B）。何が起こっているのか、行う。

A：不要な水平スクロール：https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/

Bは：フッターをコメントアウトし、画像がグラグラ行く：私は私のフッターの変更しようとしていたhttps://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/当初

margin-left: 20px;またはpadding-left: 20px;にleft: 20px;を持っていることから、ルールを設定します私はこの問題に遭遇しました！私はそれが画像の実際の解像度に関連していると推測しますが、わかりません。

ブラウザのサイズを変更すると、画像の中心が調整されます。

私はSlackグループには役に立たないと尋ねましたが、私は別のブラウザでそれをテストしましたが、これはFirefox上でのみ問題であるようです。クロムとエッジでは問題はありません...私はFirefoxのユーザーのためにこれを修正する方法は私の更新された質問だと思います。

EDIT：ウェブサイトを更新するため、問題は（A）リンクには表示されません。しかし、テストサイト（B）は依然として起き上がり、壊れています。ありがとう！

Answer 1

Firefoxはただposition: absolute;の画像をdisplay: flex; position: relative; justify-content: center; align-items: center; divs weirdに表示することがあります。

.mission-child imgと.locations-child imgルールセットにalign-self: flex-start;とtop: 0;の宣言を追加することで問題を解決しました。

ありがとうございました！

Answer 2

あなたfooter要素は、（それがブロックレベル要素なので、画面の全幅である）auto幅を有しているが、その後、あなたが（position:relativeと組み合わせる）left: 20pxを言うので、今それが画面の幅いっぱいだが、それが起動します左から20pxです。つまり、画面の右側から20px離れています。

padding-left:20px on footerは同じ目標を達成し、水平スクロールバーを発生させません。

Answer 3

position: absoluteが.mission-child imgにあるため、あなたの画像はFirefoxの左側にデフォルト設定されているようです。これをposition: relativeに設定すると、画像が正しく集中化されているようです。

フッタは、ページ上で全幅を占め、さらにleft: 20pxが表示されます。このオフセットは左からであり、合計幅は100% + 20pxです。フッター自体には含まれていないテキストをオフセットするには、padding-left: 20pxを探しています。

希望すると便利です。 :)