How to handle "centering" your website in react

I think this is a relatively simple question how do I "center" my website with react, let me explain. here is a picture of something I just made in figma and now am trying to implement in react https://gyazo.com/e940da061c627cbb5d30571efebf2c7b im wondering how to get the margin on the left and right (while still allowing things to overflow it like the sides of the navbar) without adding margin to all my elements. some sort of "Layout" component but I am struggling trying to get this to work and its such a common thing to have your site aligned like this im sure someone here knows. all help is appreciated, thanks. (Im using tailwind css and preferably do not want to use a different framework or something)

Solution

You can made a wrapper inside the main div. So the main div will cover 100% width of your website. Then the wrapper inside it has property like this

main {
  height: 100vh;
  width: 100%;
}

.wrapper_main {
  max-width: 1000px;
  margin: 0 auto;
  width 100%;
  background-color: pink;
}

max-width will limit your website from expanding. Margin auto make it always in the center. Width 100% for smaller device, so no margin in between. Backgroud color is the best for debugging css code.