Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I don’t know why my media query doesn’t pass.
Also, my CSS for .projects, .projects-grid and .contact do not work as well.

Your code so far

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700&amp;display=swap" rel="stylesheet">
  </head>
  <link rel="stylsheet" href="styles.css">

</head>

<body>
  <div id="navbar"> 
    <ul>
      <li><a href="" id="About" target="_blank">About</a></li>
      <li><a href="" id="Work" target="_blank">Work</a></li>
      <li><a href="#contact" id="Contact" target="_blank">Contact</a></li>
    </ul>
  </div>

  <section id="welcome-section" class="welcome-section">
    <h1>Hey I'm Mimic</h1>
    <p>a web developer</p>
     </section>

  <section id="projects" class="projects"> 
    <div class="project-header">
    <h2>These are some of my projects </h2>
    </div>
    <div class="projects-grid"> 
     <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project-tile"/> <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" >
     <p class="project-tile">
       <span class="code"><</span>Tribute Page<span class="code">/><span>
    </p>
    </a>


      <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank"> <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="Random Quote Machine" class="project-tile">
<p class="project-tile">
       <span class="code"><</span>Random Quote Machine<span class="code">/><span>
</p>
</a>

      <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-tile" class="project-tile"/><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="JavaScript Calculator">
      <p class="project-tile">
       <span class="code"><</span>JavaScript calculator<span class="code">/><span>
</p>
</a>

<a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="Map Across The Globe">
<p class="project-tile">
       <span class="code"><</span>Map Across The Globe<span class="code">/><span>
</p>
</a>

<a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="Wikipedia Viewer">
<p class="project-tile">
       <span class="code"><</span>Wikipedia Viewer<span class="code">/><span>
</p>
</a>

<a href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="Tic Tac Toe">
<p class="project-tile">
       <span class="code"><</span>Tic Tac Toe<span class="code">/><span>
</p>
</a>
    </div>
    </section>

  <div>
    <a href="https://codepen.io/FreeCodeCamp/" class="show-all" target="_blank" id="profile-link">Show all<i class="fas fa-chevron-right"></i></a>
  </div>
  
  <section class="contact" id="contact" >
    <div class="contact-section-header">
    <h1>Let's Work together </h1>
    <p>How do you take your coffee</p>
    </div>

    <div class="contact-section-link">
        <a href="https://facebook.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-facebook-square"></i> Facebook</a>
        <a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
        <a href="https://twitter.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i> Twitter</a>
        <a href="mailto:example@example.com" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a>
        <a href="tel:555-555-5555" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Call me</a>
      </div>
    
       </section>
  <footer> 
     <p>
        **This is just a fake portfolio. All the projects and contact details
        given are not real.
      </p>
      <p>
        © Created for
        <a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a>
      </p>
    </footer>
 
</body>

<html>

<!--END OF HTML-->

CSS:

*{margin:0;
padding:0;
box-sizing:box;}

:root{
 --main-white: #f0f0f0;
    --main-red: #be3144;
    --main-blue: #45567d;
    --main-gray: #303841;

}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--main-white);
}

section{display:block;}

li{list-style-type:none;
display: inline-block;
font-size: 1em;
padding: 10px;
font-weight: bold;
color: var(--main-white);
}

li a{text-decoration: none;
color: var(--main-white);}

#navbar{
display: flex; justify-content: flex-end;    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
    z-index: 10;
 }
 .welcome-section {display: flex;   flex-direction: column;   justify-content: center;    align-items: center;
width: 100%;
height: 100vh;   background-color: #000;   background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);

.projects{text-align: center;
    padding: 10rem 2rem;
    background: var(--main-blue);
}

.projects-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;}

.contact {background-color: var(--main-blue);}

@media (max-width:600px){body{font-size:60%;}}
@media (max-width:500px){body{font-size:50%;}}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Check the .welcome-section selector. See something missing?