CSS Modification For Correct Banner Alignment

AI-generated summary

The discussion CSS Modification For Correct Banner Alignment revolves around Deenius seeking help with a CSS modification issue. They created a banner following the instructions from https://meta.discourse.org/t/house-ad-templates/122004, but it’s not centered and is too close to the header. Deenius provided a screenshot and the CSS code, asking for advice on how to add a 10px space between the banner and the headline, and to center it. Arkshine suggested adding place-self: center; and margin: 1em 0; to the .banner-ad class to resolve the issue, and Deenius thanked them for the help.

Hey, guys. Is there anyone who can help me with CSS modification?

I’m a beginner at this and don’t know what to do.

I made my first banner exactly according to the instructions (House Ad Templates). However, the banner is not centred on the page and is too close to the header (see screenshot).

I would like to have a space of at least 10px between the banner and the headline.

Can someone please advise me on changing the code to remove these two flaws?

    .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;
            }
        }
    }

In banner-ad, you can add:

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

Thank you very much!