[Dúvida] Quando altero a resolução a tela fica achatada

Estou desenvolvendo um site em html utilizando o tailwindcss e quando vou alterar a resolução do monitor, as telas ficam achatadas e não cobrem a tela inteira, queria saber como resolver esse erro . Na imagem da para perceber, pois fiz uma section com o fundo verde que nao acompanha toda a tela.

Código do projeto:

<!-- Cabeçalho -->
<header id="header" class="fixed top-0 w-full z-10 bg-white shadow-md">
    <nav class="flex justify-between items-center px-4 h-20">
        <img src="./img/logo1.png" alt="Logo da Scuderia" class="h-6 ml-16">
        <button class="hamburguer block md:hidden relative">
            <span class="block w-9 h-1 bg-black mb-1"></span>
            <span class="block w-9 h-1 bg-black mb-1"></span>
            <span class="block w-9 h-1 bg-black"></span>
        </button>
        <div class="fixed top-0 left-0 w-64 bg-white shadow-md transform -translate-x-full" id="mobile-menu">
            <ul class="flex flex-col p-4">
                <li class="py-2"><a href="#inicio" class="text-black text-lg font-semibold font-oswald">Início</a>
                </li>
                <li class="py-2"><a href="#sobre" class="text-black text-lg font-semibold font-oswald">Sobre</a>
                </li>
                <li class="py-2"><a href="#" class="text-black text-lg font-semibold font-oswald">Áreas</a></li>
                <li class="py-2"><a href="#" class="text-black text-lg font-semibold font-oswald">Patrocínio</a>
                </li>
                <li class="py-2"><a href="#" class="text-black text-lg font-semibold font-oswald">Contato</a></li>
                <li class="py-2"><a href="#" class="text-black text-lg font-semibold font-oswald">Notícias</a></li>
            </ul>
        </div>
        <div class="hidden md:flex flex-col md:flex-row md:items-center md:w-auto w-full">
            <ul class="flex list-none p-0 m-0">
                <li class="mr-4"><a href="#inicio" class="text-black text-lg font-semibold font-oswald">Início</a>
                </li>
                <li class="mr-4"><a href="#sobre" class="text-black text-lg font-semibold font-oswald">Sobre</a>
                </li>
                <li class="mr-4"><a href="#" class="text-black text-lg font-semibold font-oswald">Áreas</a></li>
                <li class="mr-4"><a href="#" class="text-black text-lg font-semibold font-oswald">Patrocínio</a>
                </li>
                <li class="mr-4"><a href="#" class="text-black text-lg font-semibold font-oswald">Contato</a></li>
                <li><a href="#" class="text-black text-lg font-semibold font-oswald">Notícias</a></li>
            </ul>
        </div>
    </nav>
</header>
<!-- Home -->
<section class="flex items-center justify-center w-full h-[700px] bg-gradient-to-b from-green-500 via-green-300 to-green-700" id="inicio">
    <img src="img/carro-frente-1.png" alt="Carro Scuderia" class="object-cover">
</section>