.principal{ padding: 3em 0; background: #FEFEFE; width: 940px; margin: 0 auto;
.mapa{ padding: 3em 0; background: linear-gradient(#FEFEFE, #888888)
busque el error no no lo encuentro, esta todo correcto por lo que revise en mi index.html en el css parece todo correcto.
lo que veo es que si borro el width:940px en principal el problema del ancho se resuelse pero no asi el margen superior infererior entre uno y otro.
Alguien que sepa que es lo que pasa?
recuerda al final tambien poner }
.principal{ padding: 3em 0; background: #FEFEFE; width: 940px; margin: 0 auto; }
.mapa{ padding: 3em 0; background: linear-gradient(#FEFEFE, #888888); }
Donde se define el mapa en el html hay una característica de width, por lo que tu section class="mapa"> se adapta a ese ancho y no al de .principal. Puedes cambiar e width a 100% ahí o meter la definición del mapa dentro de un div> y atribuirle un ancho específico con su nueva clase.HTML section class="mapa"> h2 class="titulo-principal">Nuestra ubicación/h2> p>Nuestro establecimiento está ubicado en el corazón de la ciudad/p> div class="mapa-contenido"> iframe src="" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">/iframe> /div> /section>*/
CSS .mapa-contenido { width: 800px; margin: 0 auto; } y el .mapa y .principal quedarían igual que como ya los tienes definidos.