CSSでバナー配置を正しく修正

皆さん、こんにちは。CSSの修正について手伝っていただける方はいらっしゃいますか?

初心者なので、どうすればいいかわかりません。

指示通りに最初のバナーを作成しました(https://meta.discourse.org/t/house-ad-templates/122004)。しかし、バナーがページの中央に配置されず、ヘッダーに近すぎます(スクリーンショットを参照)。

バナーと見出しの間に少なくとも10pxの間隔を設けたいです。

これらの2つの欠点を修正するために、コードの変更についてアドバイスしていただけますか?

    .banner-ad {
        display: flex;
        clear: both;
        max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
        box-sizing: border-box;
        img {
            height: 100%;
            &.desktop {
                display: block;
            }
            &.mobile {
                display: none;
            }
        }
    }

    @media only screen and (max-width: 672px) {
        .banner-ad {
            img.desktop, p {
                display: none;
            }
            img.mobile {
                display: block;
            }
        }
    }

banner-ad には以下を追加できます。

place-self: center;
margin: 1em 0;

「いいね!」 3

どうもありがとうございます!

「いいね!」 1

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.