Centering Items in Grid Display + more

Hello, this contains 3 questions pertaining to the media query for max-width 480px.

  1. In the media query, I am trying to center the items for my About section. I have used (justify-items: center), but the intro description and button are still not centered. What is the problem here?

  2. I would like to center the items in my header. What CSS would fix this?

  3. Is there a way to have the Projects section automatically wrap all its children in the background color, or do we have to set this specifically no matter what?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Michelle</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
      <h2 id="name">Michelle</h2>
      <nav id="navbar">
        <ul>
          <li name="welcome"><a href="#welcome-section">About</a></li>
          <li name="projects"><a href="#projects">Projects</a></li>
          <li name="contact"><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="welcome-section">
        <div class="welcome-section">
          <h1 id="intro">Hello! I'm Michelle.</h1>
          <p class="intro-desc">I am learning how to code and this is my first kick at designing a personal website. Please take a look and feel free to send me a message with suggestions and tips ~
          </p>
          <button>Resume</button>
        </div>
      </section>
      <section id="projects" class="projects">
        <h2 class="heading2">Projects</h2>
        <p class="header-desc">All of my latest projects are here.</p>
        <div class="project-tile">
          <div class="project">
            <a href="https://github.com/"><img src="https://i.pinimg.com/originals/19/aa/ee/19aaee8246ea2766a47720fbafab5054.png" alt="project 1 image"/>
            <p class="project-title">Project 1</p></a>
            <p class="project-desc">What this project is about here</p>
          </div>
          <div class="project" >
            <a href="#"><img src="https://i.pinimg.com/originals/6e/d3/45/6ed3458ebe63c1ffaaeca7a4c3b47eca.png" alt="project 2 image"/>
            <p class="project-title">Project 2</p></a>
            <p class="project-desc">What this project is about here</p>
          </div>
          <div class="project"> 
            <a href="#"><img src="https://s3.getstickerpack.com/storage/uploads/sticker-pack/cute-dinosaur-2/tray_large.png?bab6f2e455b2369d39fdc70c676078e5" alt="project 3 image"/>
          <p class="project-title">Project 3</p></a>
          <p class="project-desc">What this project is about here</p>
          </div>
        </div>
      </section>
      <section id="contact">
        <h2 class="heading2">Let's Connect</h2>
        <p class="header-desc">Feel free to contact me with any of options below.</p>
        <div class="icons">
            <a id="profile-link" href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin-square icon" style="font-size:32px"> Linkedin</i></a>
            <a href="https://www.rd.com/list/adorable-puppy-pictures/" id="profile-link" target="_blank"><i class="fa fa-github icon" style="font-size:32px"> Github</i></a>
            <a href="https://www.stylecraze.com/articles/most-beautiful-daisy-flowers/" id="profile-link" target="_blank"><i class="fa fa-facebook icon" style="font-size:32px"> Facebook</i></a>
        </div>
      </section>
    </main>
  </body>
</html>

:root {
  --base-color: #b9e6ff;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  text-align: center;
}

header {
  width: 100%;
  height: 7%;
  background-color: beige;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  position: fixed;
}

nav > ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-right: 35px;
}

nav > ul > li > a {
  text-decoration: none;
  color: black;
  padding: 20px;
  font-size: 20px
}

li > a:hover {
  color: gray;
  cursor: pointer;
}

.welcome-section {
  height: 100vh;
  overflow: auto;
  background-color: var(--base-color);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  justify-items: start;
}

#intro {
  grid-column: 2 / 5;
  grid-row: 2 / 3;
  font-size: 5rem;
  align-self: end;
}

.intro-desc {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  text-align: left;
  line-height: 2;
  font-size: 20px;
  max-width: 400px;
}

button {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  align-self: start;
  font-size: 1.1rem;
  padding: 15px 25px;
}

button:hover {
  cursor: pointer;
}

.heading2 {
  font-size: 3rem;
  padding-top: 100px
}

.header-desc {
  font-size: 20px;
}

.projects {
  height: 100vh;
  background-color: #BBD0FF;
}

.project-tile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin: 50px 20%;
  grid-gap: 10px;
}

div > a > img {
  width: 200px;
  padding: 30px;
  border-bottom: 1px solid black;
}

div > a {
  text-decoration: none;
  color: black;
}

div > a:hover {
  color: white;
}

.project {
  border: 1px solid black;
}

.project-title, .project-desc {
  font-size: 20px;
}

#contact {
  height: 75vh;
  background-color: #BBD0FF;
}

.icon {
  padding: 20px
}

.icons > a {
  color: black;
}

.icons > a:hover {
  color: white;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

@media only screen and (max-width: 480px) {
  header {
    display: block;
    height: 15%;
  }

  #name {
    padding: 3px;
    font-size: 1.7rem;
  }

  .welcome-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(100px, auto));
    justify-items: center;
  }

  #intro {
    font-size: 4rem;
  }

  .project-tile {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .projects {
    height: 325vw
  }
}

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

Hello.

Your header have display:flex, right?
Some play around justify-content or something similar(flexbox-related properties) doesn’t get the job done?

Hi,
I changed the header to display:block under my media query. I just tried adding margin: 0 auto but nothing happened.