Home page using CSS grid, flexbox and with mobile navigation

Hi Victor! You could get the navigation links closer to the left if you remove justify-content: center; and add margin-left to navigation links. Also you can get the same shadow-effect if you add box-shadow instead using backdrop-filter.

  .main-nav {
      background-color: rgb(253, 242, 233); /*remove opacity*/
      box-shadow: -10rem 0 rgb(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform: translateX(100%);
      display: flex;
      align-items: center;   
      transition: all 0.5s ease-in;
      /* 1) Hide it visually */
      opacity: 0;
      /* 2) Make it unaccesible to mouse and keyboard */
      pointer-events: none;
      /* 3) Hide it from screen readers */
      visibility: hidden;
    }

   .main-nav-link:link,  
   .main-nav-link:visited {
      font-size: 1.1rem; */smaller size*/
      margin-left: 2rem;
    }