Nginx config file is not configured properly. "This site can’t be reached"

Question

I'm fairly new to Nginx and web servers in general.

My setup is docker, Nginx, PHP/laravel, +let's encrypt.

I have this Nginx config file:

server {
    listen 80;
    server_name www.example.io;
    return 301 https://example.io$request_uri;
}

server {
    listen 80;
    server_name example.io;
    return 301 https://example.io$request_uri;
}

server {
    listen 443 ssl;
    server_name example.io;
    ssl_certificate /etc/nginx/certs/example.io.pem;
    ssl_certificate_key /etc/nginx/certs/example.io.key;

    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/public;

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
}

I'm pretty sure my certificates are not what the problem is. because they do work when I have a single port 80 server and it has server_name example.io www.example.io but in that case, I'm unable to access the website through example.io as secure. while the www.example.io is secure. it also acts like two different websites. I believe the cookies in one do not implement in the other.

What I'm trying to achieve is, I wish to redirect both www.example.io and example.io to https://example.io