# CSS Modification For Correct Banner Alignment

**URL:** https://meta.discourse.org/t/css-modification-for-correct-banner-alignment/355612
**Category:** Development
**Created:** [March 4, 2025, 10:14am UTC](https://meta.discourse.org/t/css-modification-for-correct-banner-alignment/355612 "2025-03-04T10:14:39Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Deenius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deenius/32/369129_2.png) [@Deenius](https://meta.discourse.org/u/Deenius)
#### Post date: [March 4, 2025, 10:14am UTC](https://meta.discourse.org/t/css-modification-for-correct-banner-alignment/355612/1 "2025-03-04T10:14:39Z")

</div>

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](https://meta.discourse.org/t/house-ad-templates/122004)). However, the banner is not centred on the page and is too close to the header (see screenshot).

[![](https://global.discourse-cdn.com/meta/original/4X/9/7/6/9765f76fe477bf9b6736b4b34ff4d105f16fd05a.jpeg) ](https://global.discourse-cdn.com/meta/original/4X/9/7/6/9765f76fe477bf9b6736b4b34ff4d105f16fd05a.jpeg)

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?

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

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 4, 2025, 12:46pm UTC](https://meta.discourse.org/t/css-modification-for-correct-banner-alignment/355612/2 "2025-03-04T12:46:31Z")

</div>

In `banner-ad`, you can add:

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

```

 ![The image shows a website interface for a platform called "Apex Trader Funding," featuring a promotional banner that reads "Infinite Possibilities" and a "Get Funded Today" button. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/c/c/9/cc914b1f2bacb5f80e37c7bf3f3070a05a2fb552.png)

---

<div class="post-metadata">

### Author: ![Deenius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deenius/32/369129_2.png) [@Deenius](https://meta.discourse.org/u/Deenius)
#### Post date: [March 4, 2025, 1:35pm UTC](https://meta.discourse.org/t/css-modification-for-correct-banner-alignment/355612/3 "2025-03-04T13:35:24Z")

</div>

Thank you very much!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 3, 2025, 1:35pm UTC](https://meta.discourse.org/t/css-modification-for-correct-banner-alignment/355612/4 "2025-04-03T13:35:28Z")

</div>

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