Header HTML 移动取决于它是在移动设备上还是在笔记本电脑上

Question

This is how it looks on computer

这就是它在 phone

上的样子

how it looks on the phone。但是，如果我将它放在计算机的中心，它会缩进 phone 和 vicesa.

我的问题是如何让它在大屏幕和小屏幕上都居中？

这是站点的 link：https://website-eight-self.vercel.app/

这些是 CSS 和 HTML 的相关文件。非常感谢你，希望你能帮助我。

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

使用@media 定位screen/device!

的特定范围

调整 Phone Version/Small 屏幕中的边距

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

Answer 2

要在所有 devices/screens 中设置自动对齐，请使用 margin 和 width 下面的代码

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

Header HTML 移动取决于它是在移动设备上还是在笔记本电脑上

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

html

css

header