adjust padding to center page using grid layout-CodePudding

I have elements aligned using grid layout The max width of the container is set to max-width: 80% which displays a gap on the right side
I want to always center the page, is there a way to adjust the padding in root dynamically ?

:root {
   
    padding-left: 5%;
    padding-right: 5%;
  }

:root {
   
    padding-left: 5%;
    padding-right: 5%;
  }
  

  .container {
    display: grid;
    height: 100vh;
    max-width: 80%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
    grid-template-areas:
      "nav nav nav nav"
      "component1 component1 component1 component1"
      "component2 component2 component2 component2"
      "footer footer footer footer";
    grid-gap: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
  
    text-align: center;
  }
  


  nav {
    text-align: center;
    background: #a7ffeb;
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  


  
  #component1 {
    background: #6fffd2;
    grid-area: component1;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  #component2 {
    background: #64ffda;
    grid-area: component2;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  




  
  footer {
    background: #1de9b6;
    grid-area: footer;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- add style css to page -->
    <link rel="stylesheet" href="./style.css" />

    <title>Document</title>
  </head>
  <body>
 
    <div class="container">
      <nav>Navbar</nav>
      <div id="component1">component1</div>
      <div id="component2">component2</div>
    
      <footer>Footer</footer>
    </div>
    
  </body>
</html>

CodePudding user response：

you can add margin: auto to the container

  .container {
    display: grid;
    height: 100vh;
    max-width: 80%;
    margin: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
    grid-template-areas:
      "nav nav nav nav"
      "component1 component1 component1 component1"
      "component2 component2 component2 component2"
      "footer footer footer footer";
    grid-gap: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
  
    text-align: center;
  }
  


  nav {
    text-align: center;
    background: #a7ffeb;
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  


  
  #component1 {
    background: #6fffd2;
    grid-area: component1;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  #component2 {
    background: #64ffda;
    grid-area: component2;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  




  
  footer {
    background: #1de9b6;
    grid-area: footer;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- add style css to page -->
    <link rel="stylesheet" href="./style.css" />

    <title>Document</title>
  </head>
  <body>
 
    <div class="container">
      <nav>Navbar</nav>
      <div id="component1">component1</div>
      <div id="component2">component2</div>
    
      <footer>Footer</footer>
    </div>
    
  </body>
</html>

CodePudding user response：

you are misunderstanding the role :root plays in css structure and confusing it with the body tag. see https://developer.mozilla.org/en-US/docs/Web/CSS/:root

this will do the trick if you're always going to wrap your page elements in a .container.

 .container{
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

this will work if your page elements may sometimes be some other element.

body > *{
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

if you want to determine the width of your elements on a case by case basis, defining your body as a flex element may help. more about flex here

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}