Left padding for Rich Text section or column? - Highlight Theme

[Hannaht2]

Trying to add left padding to a rich text section on my Highlight theme.

I added this CSS to the id section:

padding-left: 50%;

Whilst it gives the section padding, it only moves it over, making the whole site width longer.

Not sure what additional CSS I need to add in, or if I should be using columns instead?

First image for context on how the CSS makes the site width larger, second image is how it should look.

Pls help!

Site URl: https://soundlab-melbourne.myshopify.com/admin/themes/131822256370/editor?previewPath=%2Fpages%2Fspecialised-lessons

[kazi_1]

Hello @Hannaht2 site is password protected

[Hannaht2]

@kazi_1 Password is: thesoundlabmelbourne

Thank you!!

[kazi_1]

Which section do you mean?

[Hannaht2]

@kazi_1

The rich text section, image for context below

[kazi_1]

which page is that? can u send the link?

[Hannaht2]

@kazi_1

https://soundlab-melbourne.myshopify.com/pages/specialised-lessons

[kazi_1]

Add this css on assets > theme.css bottom of file

#shopify-section-template–15985039868146__164863221804800728 .rich-text-blocks {
padding-left: 30%;
}

[Hannaht2]

@kazi_1

Thank you so much!!!

How do I remove the padding for mobile?

[kazi_1]

Then use this css instead the previous one

@media (min-width:768px) {

#shopify-section-template–15985039868146__164863221804800728 .rich-text-blocks {
padding-left: 30%;
}

}