tengo un problema, cuando se muestra la web en mi pc, el tamaño de la seccion de noticias, se supone que deben ver un fila de 4 imagenes, pero solo me muestra 2 filas, donde la primera fila son las tres imagenes, y la segunda fila aparece la 4 imagen,
<div class="text-center mx-auto pb-4 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 row-cols-1 row-cols-md-3 g-4">
<div class="col" style="max-width: 300px">
<div class="card h-100">
<img
src="img/portal_alto_mirasol.png"
style="max-width: 300px"
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" style="max-width: 300px">
<div class="card h-100">
<img
src="img/vista_cordillera.png"
style="max-width: 300px"
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" style="max-width: 300px">
<div class="card h-100">
<img
src="img/escuela_compu.png"
style="max-width: 300px"
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" style="max-width: 300px">
<div class="card h-100">
<img
src="img/casa_pauly.png"
style="max-width: 300px"
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>
aca esta el css cada vez que aumento el width a 100%, me afecta en tamaño pequeño, como se demuestra en la imagen:(, eso me sucede cuando solo modifico esas propiedades, primera foto me resulta bien todo centrado en tamaño pequeño, pero cuando aumento a 100%, el tamaño de foto me queda bien me junta las 4 fotos, en una fila. :(
.center{
width: 75%;
margin: 0px auto;
}
<>
). Si lo haces, no olvides agregar la librería de Bootstrap.