Pfthb

I want to keep the container grid 2 centered with the spaces on both sides
on any screen size(responsive), but what happens right now is the side spaces shrink to nothing as the screen size decreases. I'm wondering how I can solve this without breaking all the work done so far.

I made a codepen, I need the container grid2 to be centered with margins on either side no matter the width of the screen.

<div class="grid2">
 <div class="Jumbotext-1">Deliver a unique</div>
 <div class="Jumbotext-2">experience</div>
 <div class="blurb-text">
 We can work together today<br>
 to create an exceptional product<br>
 that screams to the world,<br>
 I belong to you.
 </div>
</div>

.grid2 
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
max-width: 90rem;
width: 100%;
margin: auto;
padding: 72px 0px 100px;

https://codepen.io/Jenson-co-in/pen/BGzgJr

Use auto width and apply the desired margin (if you want fixed margins) to the sides:

.grid2 
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 border: 1px solid red;
 max-width: 90rem;
 width: auto;
 margin: auto 10px;
 padding: 72px 0px 100px;

Or you can use auto margin for the sides and have the width be less than 100% (if you want fixed responsive width):

.grid2 
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 border: 1px solid red;
 max-width: 90rem;
 width: 90%;
 margin: auto;
 padding: 72px 0px 100px;