CSS-модификация для правильного выравнивания баннера

Привет, ребята. Кто-нибудь может помочь мне с модификацией CSS?

Я новичок в этом и не знаю, что делать.

Я сделал свой первый баннер в точном соответствии с инструкциями (House Ad Templates). Однако баннер не отцентрован на странице и расположен слишком близко к заголовку (см. скриншот).

Я бы хотел, чтобы между баннером и заголовком было расстояние не менее 10 пикселей.

Может ли кто-нибудь подсказать, как изменить код, чтобы исправить эти две проблемы?

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

Спасибо большое!