Header HTML getting moved depending if it's on mobile or laptop

Question

This is how it looks on computer

And this is how it looks on the phone

how it looks on the phone. However, if I centered it on the computer, it becomes indented on the phone and vicersa.

My question is how can I get it to be centered on both big and small screens?

Here's the link of the site: https://website-eight-self.vercel.app/

These are the relevants files both CSS and HTML. Thank you so much and I hope you can help me.

header {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 25px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-top: 50px;
  margin-left: 50px;
}

      <header>
      <Link href="/">
       <a>Juan David Campolargo</a>
      </Link>
      </header>

Answer 1

Use @media to target specific range of screen/device!

Adjust the margin in Phone Version/Small Screens

@media only screen and (max-width: 600px) {
  header {
    margin-left: ;
    margin-top: ;
  }
}