Problemas con linear-gradient

Con respecto a tu primera pregunta para poder ver cual es el problema comparte también el código CSS y respondiendo tu segunda pregunta la del mapa, te está pasando eso por que el ancho aparece como 100%

<div class="mapa-contenido">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449977466485!2d-46.63452058459832!3d-23.588189868469627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses!2scr!4v1672351568898!5m2!1ses!2scr" width=100% height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>

en esa linea econtrarás que el width = 100% , ello le indica que ocupe el todo el ancho.

Gracias!, Con respecto con lo del mapa, lo estuve comparando el código a descargar y aparece igual con un width de 100%,este seria el código de css:

body{
    font-family: 'Montserrat', sans-serif;
}
header{
    background-color: #BBBBBB;
    padding: 20px 0;
}
.cajas{
    width: 940px;
    position: relative;
    margin: 0 auto;
}
nav {
    position: absolute;
    top: 110px;
    right: 0%;
}
nav li{
    display: inline;
    margin: 0 0 0 15px;
}
nav a{
    text-transform: uppercase; 
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
nav a:hover{ 
    color: #c78c19;
}
.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}
.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}
.productos li:hover{
    border-color: #c78c19;
}
.productos li:hover h2{
    font-size: 33px;
}
.productos li:active{
    border-color: #088c19;
}
.productos h2{
    font-size: 30px;
    font-weight: bold;

}
.descripcion{
    font-size: 18px;
}
.precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}
.fin{
    color: #CCCCCC;
    font-size: 10px ;
    margin: 20px;
}
form{
    margin: 40px 0;
}
form label, form legend{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}
.padron{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}
.checkbox{
    margin: 20px 0;
}
.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: orange;
    border: none;
    border-radius: 5px;
    transition: 3s;
    cursor: pointer;
}
.enviar:hover{
    background-color: darkorange;
    transform: scale(1.2);
}
.table{
    margin: 40px 40px;
}
thead{
    background: #555555;
    color: white;
    font-weight: bold;
}
td, th {
    border: #000000 1px solid ; 
    padding: 8px 15px;
}
/*CSS para nuesdtra pagina incial*/
.banner{
    width: 100%;
}
.principal{
    padding: 3em;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}
.tituloprincipal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}
.principal p{
    margin: 0 0 1em;
}
.principal strong{
    font-weight: bold;
}
.principal em{
    font-style: italic;
}
.utencilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}
.mapa{
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888)
}
.mapa p{
    margin: 0 0 2 em;
    text-align: center;
}
.mapa-contenido{
    width: 940;
    margin: 0 auto;
}
.diferenciales{
    padding: 3em 0;
    background-color: #888888;
}
.contenido-diferenciales{
    width: 640px;
    margin: 0 auto;
}
.listadiferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}
.item{
    line-height: 1.5;
}
.items:before{
    content:"★"
}
.item:first-child{
    font-weight: bold;
}
.imagen-diferenciales{
    width: 60%;
}
.video{
    width: 560px;
    margin: 1em auto;
}

Probé el código y el mapa no me cubre el ancho total, quizas te cubre el ancho por que la resolución de tu pantalla está muy cerca a los 940px ya que el ancho que le indicas al mapa es ese

.mapa-contenido {
  width: 940;
  margin: 0 auto;
}

Luego sobre el degradado pasa que el profesor cometió un error el cual lo corrige luego, el error es que deja el div del video fuera del seccion donde está el div diferenciales

<section class="diferenciales">

            <h3 class="tituloprincipal">Diferencias </h3>

            <div class="contenido-diferenciales">
                <ul class="listadiferenciales">
                    <li class="items">Atencion persolnalizada a los clientes</li>
                    <li class="items">Localizacion</li>
                    <li class="items">Espaciodiferenciado</li>
                    <li class="items">Profecionales destacados</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza</li>
                </ul><img src="diferenciales.jpg" class="imagen-diferenciales">
            </div>
        </section>

        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/W18jsNa8KmA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

La forma corregida es esta

<div class="contenido-diferenciales">
        <ul class="listadiferenciales">
          <li class="items">Atencion persolnalizada a los clientes</li>
          <li class="items">Localizacion</li>
          <li class="items">Espaciodiferenciado</li>
          <li class="items">Profecionales destacados</li>
          <li class="items">Puntualidad</li>
          <li class="items">Limpieza</li>
        </ul>
        <img src="diferenciales.jpg" class="imagen-diferenciales" />
      </div>
      <div class="video">
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/W18jsNa8KmA"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>