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

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>

CodePudding user response：

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: ;
  }
}

CodePudding user response：

To set the alignment auto across all devices/screens use margin and width Code below

#Sample{
Width: 90%;
margin-right: auto;
margin-left: auto;
}