El problema es que le estás dando un ancho fijo a cada tarjeta con la propiedad **`max-width: 300px`**, de la cual no se tomará en cuenta el ancho que toma los **`col`** dentro del **`row`**, es por eso que las tarjetas no se estiran del todo bien cuando la resolución de pantalla es cada vez más pequeña. A cada tarjeta, le apliqué las siguientes clases: <div class="col-lg-3 col-sm-6"> <!-- Este es el nuevo cambio para cada tarjeta --> <div class="card h-100"> <img src="https://i.imgur.com/rc4Zbbw.jpg" style="width: 100%;" class="card-img-top logo-1 col-4" alt="..." /> <div class="card-body"> <h5 class="card-title">Portal Altos de Mirasol II</h5> <p class="card-text"> Asesoría a la Fiscalización Técnica de Obras DS-49 "Portal Altos de Mirasol II", Puerto Montt. </p> <p class="card-text"> <small class="text-muted">En Ejecucion...</small> </p> </div> </div> </div> En donde: // col-lg-3 => en el ancho 'lg' de la pantalla ocupará las 4 tarjetas en 1 fila // col-sm-6 => en el ancho 'sm' de la pantalla ocupará solo 2 tarjetas en 2 filas Y para que esto funcione, tu clase **`row`**, que encierra las 4 tarjetas, tendría que estar de la siguiente manera: <div class="row g-4"> // ... </div> Ahora para arreglar lo de las imágenes, apliqué los siguientes cambios para que ocupe siempre el 100% del ancho de la tarjeta y no haya espacio de sobra: <img src="https://i.imgur.com/rc4Zbbw.jpg" style="width: 100%;" // Este es el nuevo cambio class="card-img-top col-4" alt="..." /> Y también en tu clase **`.center`** no es necesario que apliques la propiedad **`width: 75%;`**, esto solo hará que las tarjetas estén mal posicionadas, les di las siguientes propiedades para que tenga un mejor resultado: .center{ padding: 20px; margin: 0px auto; } Tu código final sería el siguiente: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" > <a href="noticias.html" class="btn py-3 px-5 animated slideInRight"> <h1 class="display-5 mb-4">Noticias</h1> </a> </div> <div class="center"> <section id="content"> <div class="row g-4"> <div class="col-lg-3 col-sm-6"> <div class="card h-100"> <img src="https://i.imgur.com/rc4Zbbw.jpg" style="width: 100%;" class="card-img-top logo-1 col-4" alt="..." /> <div class="card-body"> <h5 class="card-title">Portal Altos de Mirasol II</h5> <p class="card-text"> Asesoría a la Fiscalización Técnica de Obras DS-49 "Portal Altos de Mirasol II", Puerto Montt. </p> <p class="card-text"> <small class="text-muted">En Ejecucion...</small> </p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="card h-100"> <img src="https://i.imgur.com/rc4Zbbw.jpg" style="width: 100%;" class="card-img-top col-4" alt="..." /> <div class="card-body"> <h5 class="card-title">Proyecto Vista Cordillera</h5> <p class="card-text"> Asesoría a la Fiscalización Técnica de Obras DS-49 "Proyecto Vista Cordillera", Puerto Montt. </p> <p class="card-text"> <small class="text-muted">En Ejecucion...</small> </p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="card h-100"> <img src="https://i.imgur.com/rc4Zbbw.jpg" style="width: 100%;" class="card-img-top col-4" alt="..." /> <div class="card-body"> <h5 class="card-title">Escuela Rural Compu</h5> <p class="card-text"> Asesoría a la Inspección Fiscal de la obra reposición escuela rural Compu, comuna Quellón. </p> <p class="card-text"> <small class="text-muted">En Ejecucion...</small> </p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="card h-100"> <img src="https://i.imgur.com/rc4Zbbw.jpg" style="width: 100%;" class="card-img-top col-4" alt="..." /> <div class="card-body"> <h5 class="card-title"> Inspección Fiscal Conservación Casa Pauly </h5> <p class="card-text"> Asesoría a la Inspección Fiscal Conservación Casa Pauly, Puerto Montt. </p> <p class="card-text"> <small class="text-muted">En Ejecucion...</small> </p> </div> </div> </div> </div> </div> </section> </div> <!-- language: lang-css --> .center{ padding: 20px; margin: 0px auto; } <!-- end snippet --> En el siguiente [**enlace**][1] podrás ver mejor los resultados. [1]: https://codepen.io/christopher-ps/pen/eYKLbON