I currently have a bunch of working static files at the domain name khairulslt.me (from NameCheap). Recently, I've tried setting up a subdirectory (khairulslt.me/RGBGame) as seen in the code below; However, I keep getting 404 errors. What am i missing out?

server {

  server_name khairulslt.me www.khairulslt.me;

  autoindex off;
  location / {
    root /var/www/khairulslt.me;
    index circles.html;
  }


listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/khairulslt.me/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/khairulslt.me/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

location /RGBGame {
    root /var/www/khairulslt.me/RGBGame;
    index colorGame.html;
    try_files $uri $uri/ /var/www/RGBGame/colorGame.html?q=$uri&$args;
    autoindex off;
  }

location /robots.txt { return 200 "User-agent: *\nDisallow: /\n"; 
  }

}

 server {
if ($host = www.khairulslt.me) {
    return 301 https://$host$request_uri;
  } # managed by Certbot


if ($host = khairulslt.me) {
    return 301 https://$host$request_uri;
  } # managed by Certbot


listen 80;
server_name khairulslt.me www.khairulslt.me;
return 404; # managed by Certbot
}

I've tried all the different settings like (alias vs root), try_files, autoindex(on, off). My main website www.khairulslt.me works fine and is serving the html/css/js files in /var/www/khairulslt.me perfectly fine. I'm just not sure why I can't replicate the settings for my other app (html/css/js files in folder /RGBGame). Could it be that I've missed out something that isn't related to the nginx config?