Problems with page width / padding effecting content upon window resize ( Sense 8.0.0 )

Store Design
, , , ,
1

Hi, I was hoping someone could help me with an issue I am struggling to find the solution to.

I am using Sense 8.0.0 theme and have used this code:

@media screen and (min-width: 990px){
.page-width {
padding: 0 30rem;
}
}

This has placed my content into the perfect position that I am happy with for full screen on my monitor. Shown in 2 images here:

fullscreen1.png
fullscreen1.png1897×900 218 KB

fullscreen2.png
fullscreen2.png1902×903 188 KB

However, when resizing the window to smaller sizes, all of the content is squashed together due to the padding, shown in the 2 images below:

resize1.png
resize1.png1858×772 167 KB

resize2.png
resize2.png1902×773 102 KB

I would like the content to stay the same size as in the full screen version and only reduce in size once they are forced too (edges of window reach them). I hope that makes sense.

The mobile version is fine.

Please could someone help me find the solution to this?

Thank you for any help!

2

Also, the header messes up and my logo shrinks and disappears ;(