只需在.welcome中添加width：fit-content，它将根据内容获取宽度，并将其父项（例如.header）显示在grid中，并对齐内容中心以使其在页面上居中对齐。

CSS CODE - * {
  box-sizing: border-box;
  margin: 0;
}

@media screen and (max-width: 600px) {
  header,
  .welcome {
    width: 100%;
  }
  .nav>ul {
    display: flex;
    justify-content: flex-end;
    right: 0;
    padding: 0;
    margin: auto;
  }
}

header {
  background-color: rgb(237, 239, 240);
  padding: 10% 10%;
  font-family: Helvetica;
  display:grid;
  justify-content:center;
}

.welcome {
  display: block;
  text-align: center;
  margin-top: 50px;
  padding-bottom: 10%;
  border: white solid 4px;
  padding: 10px;
  width:fit-content;
}

h2 {
  margin: 0;
  margin-bottom: 0.2rem;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

个字符

你不需要所有的代码

header {
  background-color: rgb(237, 239, 240);
  padding-block: 10%;
  display: flex;
}

.welcome {
  text-align: center;
  margin-inline: auto;
  border: white solid 4px;
  padding: 10px;
}

h2 {
  margin: 0 0 0.2rem;
}

个字符