cambia de color solamente atras del parrafo pero no todo el ancho de la pagina

body{
    font-family: 'Montserrat', sans-serif;
}

header{
    background: magenta;
    padding: 6px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 35px;
    right: 0px
}

nav li{
    display: inline;
    margin: 0 10px 0 10px;
}

nav a{
    text-transform: uppercase;
    color: rgb(0,0,0);
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: aqua;
    text-decoration: underline;
}

.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: black 2px solid;
    border-radius: 0 40px 0 40px;
}

li img{
    width: 100%;
    border-radius: 22px;
}


.productos li:hover{
    border-color: aqua;
}

.productos li:active{
    border-color: magenta;
}
.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 33px;
}

.producto-descripcion{
    font-size: 18px;
    margin-top: 3%;
}

.footer{
    text-align: center;
    background: magenta;
    padding: 5px;
}

.copyright{
    color: black;
    font-size: 18px;
    margin: 10px;
    font-weight: bold;
}

form {
    margin: 40px 0;
}

form label {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: purple;
    border: none;
    border-radius: 8px;
    transition: 300ms all;
    cursor: pointer;
}

.enviar:hover{
    background: aqua;
    color:black;
    transform: scale(1.1);
}

/* Inicio */

.banner{
    width: 100%;
}

.principal{
    padding: 3em 0;
    background: magenta;
    width: 940px;
    margin: 0 auto;
    clear: left;

}

.titcentrado{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
}

.principal p{
    margin: 0 0 1em;
}

.principal strong{
    font-weight: bold;
}

.principal em{
    font-style: italic;
}

.utiles{
    width: 120px;
    float: left;
    margin: 0 10px 10px 0;
    border-radius: 6px;
}

.mapa{
    padding: 3em 0;
    background: linear-gradient(magenta, aqua);
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;
}
.mapa-contenido{
    width: 940px;
    margin: 0 auto;
}

.diferencial{
    padding: 3em 0;
    background: aqua;
}

.contenido-diferencial{
    width: 640px;
    margin: 0 auto;
}

.lista-diferencial{
    width: 40%;
    display: inline-block;
    vertical-align: top;

}

.items{
    line-height: 2;
}

.items:before{
    content:"\2713";
}

.items:first-child{
    font-weight: bold;
}

.imagen-diferencial{
    width: 60%;
    border-radius: 6px;
    transition: 300ms;
}

.imagen-diferencial:hover{
    opacity: 0.6;
    transition: 300ms;
}

.video{
    width: 560px;
    margin: 1em auto;
}

Tengo un problema similar, solo que a mi no se me rellena nada

el problema se debe a que el width en el css de .principal está en 940px, si colocas el width en auto ahi se llena por completo pero la imagen de utensilios queda pegada al margen izquierdo, mi solucion fue dejarlo en blanco. lo que tambien podes hacer por ejemplo en la pagina productos, crear un .background en css con su respectiva class del html de productos y cambiar el color a gusto, en mi caso lo hice asi. Pero en la pagina principal esa sección la tuve que dejar en blanco. Espero te sirva, saludos.

Efectivamente, el problema son los 940px despuestos para el width del .principal, por que está delimitando ese ancho. Fíjate que no sucede lo propio con el .mapa por que no está acotado su ancho.

Saludos