I want the text div to be centered but the text to be aligned left.

I have nested containers, but Im unable to work out how to get the container rows on the right of the attached image “orange/yellow/green” to be responsive and resize as I shrink the browser windows – They should be based on the Right and left container size (18% left and 82% right), with the overall width of the sedction being 1140px. instead the content floats off to the right when the browser is reduced in size.The Entire set of containers should be centred in the middle of the page. Its just this one section Im stuck on.

I’m making a website for my school, but I’m really quite new to responsive, the page looks good on PC, but on phone and tablet there are things that don’t look good or aren’t sized correctly.
I’ll leave the Github repository where I have the webpage: https://github.com/PiliesWeb/PiliesWeb.github.io

I’m setting a media max-width to change a margin-top property on mobile.
It works on my iphone and windows computer (chrome) but doesnt work on my Mac (chrome too). Maybe a problem of resolution but the margin-top is not the same when resizing the windows to mobile size on mac.

I have 4 icons which should align like the image below.