No puedo adaptar la pagina a version celular

Se me queda el logo y los nav y el banner muy chico en la izquierda por algun motivo html

    <div class="container">
        <h1>
            <img src="https://pbs.twimg.com/media/FuzRPl-XgAMHtgp?format=png&name=small" alt="logo" class="logo-image">
        </h1>
    </div>
</header>

<main>
    <main>
<section class="principal">
       <h2 class="titulo-principal">Casa de Raco</h2>
        <p>Ubicada en el corazón de  <strong>Raco</strong> .</p>
        <p id="mision"><em>Alquilo casa en Raco de tres dormitorios: <strong>"en un terreno de 1400 m².

Excelente ubicación, en plena villa, a metros del Club. Muy lindas vistas. Capacidad para seis personas".

Contacto: 3815551234.

Nuestra Ubicacion

La casa se encuentra ubicada en el centro de Raco

 <section class="diferenciales">
        <h3 class="titulo-centralizado">Caracteristicas</h3>
        <div class="contenido-diferenciales">
        <ul class="lista-diferenciales">
            <li class="items">Tres dormitorios</li>
            <li class="items">Salamandra</li>
            <li class="items">Ubicación</li>
            <li class="items">Hermosas vistas</li>
        </ul><img src="https://pbs.twimg.com/media/FukjeYdWYAAQXkU?format=jpg&name=large" class="imagen-diferenciales">
        </div>

css: @media screen and (max-width:480px) {

h1{ text-align: center; } header { padding: 10px 0; }

.banner { height: auto; width: 100%; }

nav { position: relative; left: auto; transform: none; width: 100%; text-align: center; }

nav li { display: block; margin: 15px 0; }

.productos { width: 100%; margin: 0; padding: 20px; }

.productos li { width: 100%; margin: 20px 0; padding: 20px; box-sizing: border-box; }

.imagen-chica { width: 100%; height: auto; }

form { margin: 20px 0; }

.input-padron { width: 100%; }

.enviar { width: 100%; }

.principal { padding: 20px; }

.mapa { padding: 20px 0; }

.contenido-diferenciales { width: 100%; margin: 0; padding: 20px; }

.lista-diferenciales { width: 100%; margin: 20px 0; }

.imagen-diferenciales { width: 100%; height: auto; } button { font-size: 24px; padding: 10px 20px; margin-right: 10px; }

.content { display: flex; justify-content: center; align-items: center; } }

@media screen and (max-width: 480px) { .logo-image { width: 100%; max-width: 200px; /* ajusta el tamaño del logo según tus necesidades */ margin: 0 auto; /* centra el logo horizontalmente */ } .nav-list { text-align: center; /* centra los elementos de navegación */ } }