How can I center a banner in the Motion theme?

[jacqueee]

Hello! I need help because we want this banner to be on center. how to do that? i check on the settings its on center but its not on center here. what code should i use?

this is the website: https://staygoldenhi.com/collections/my-gems

2nd. when you view https://staygoldenhi.com/collections/my-gems

this will suddenly appear for 1- 2 sec and we want to get rid of that. pls help

[kazi]

Assets > dev_style.css >  go to line #944 and remove  "float:left"  from this css 

.template-collection .section-header {
padding-top: 0;
 float: left; 
}

[BrainStation23]

HI @jacqueee  We have gone through your problem and found a solution. 
Solution:
You can follow these steps to achieve your result
Go to online store->Edit code->dev_style.css  file
And pest bellow code 

.template-collection .section-header {
padding-top: 0;
 float: left !important; 
}

[arraynex]

Hello @jacqueee,

It's ArrayNex support team and glad to support you today.

I checked your website and found that the cause of this issue.

Your Solution:
You can follow these steps to achieve your result
Go to online store->Edit code->dev_style.css  file
And pest bellow code 

.template-collection .section-header {
padding-top: 0;
 float: left !important; 
}

If you require any further information, feel free to contact me.

Best regards,
ArrayNex Support Team

[Ihor-Sh · Accepted solution]

Hello @jacqueee if you want it to look as on screenshot
- add such styling in dev_style.css:

.template-collection .section-header {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    float: none;
}

2. You see this weird thing because of boost app. If you want to get rid of this - you need to abandon this app.