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%2Fspe...

[kazi]

Hello @Hannaht2  site is password protected

[Hannaht2]

@kazi Password is: thesoundlabmelbourne

Thank you!!

[kazi]

Which section do you mean?

[Hannaht2]

@kazi 

The rich text section, image for context below 

How it should lookHow it looks with padding-left: 50%; added

[kazi]

which page is that? can u send the link?

[Hannaht2]

@kazi 

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

[kazi]

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

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

[Hannaht2]

@kazi 

Thank you so much!!!

How do I remove the padding for mobile?

[kazi · Accepted solution]

Then use this css instead the previous one

@media (min-width:768px) {

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

}