Aligning content from header and main horizontally

What are the easiest methods of centering the header with the main of the page so that they will stay centered no matter the screen resolution?

I have my header container like this:

.header-container {
  display: flex;
  position: relative;
  margin: 2rem 1rem;
  justify-content: center;
  max-width: 100%;
}

And my main container like this:

.main-container {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(100px, 400px));
  column-gap: 2rem;
  row-gap: 3rem;
}

How can I align both of them horizontally if they're both centered but have different sizes?

I've tried to use align or justify content with this and grid but it's cropping my whole page then and making my page look bad overall:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-container {
  display: flex;
  position: relative;
  margin: 2rem 1rem;
  justify-content: center;
  width: 100%;
}

.main-container {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(100px, 400px));
  column-gap: 2rem;
  row-gap: 3rem;
  width: 100%;
}

.header-item {
  background-color: lightblue;
  padding: 1rem;
}

.main-item {
  background-color: lightcoral;
  padding: 2rem;
}

<header class="header-container">
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
</header>

<main class="main-container">
  <p>Main item</p>
  <p>Main item</p>
  <p>Main item</p>
  <p>Main item</p>
</main>

Solution

There is a way to adjust the number and align it according to the width.

Would you like to try?

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-container {
  display: flex;
  position: relative;
  margin: 2rem 1rem;
  justify-content: center;
  width: 100%;
}

.main-container {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(6, minmax(100px, 400px));
  column-gap: 0;
  row-gap: 3rem;
  width: 100%;
}

.header-item {
  background-color: lightblue;
  padding: 1rem;
  flex-grow: 1;
  text-align: center;
}

.main-item {
  margin: 0;
  background-color: lightcoral;
  padding: 1rem;
  text-align: center;
}

<header class="header-container">
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
</header>

<main class="main-container">
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
</main>