No encuentro la falla en mi index.html

Y mi style.css es:

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

header {
    background-color: #bbbbbb;
    padding: 20px 0;
}

.principal {
    background: #fefefe;
    padding: 3em 0;
}

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

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

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;
    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: 2px solid #000000;
    border-radius: 10px;
}

.productos li:hover {
    border-color: #c78c19;
}

.productos li:active {
    border-color: #088c19;
}

.productos h2 {
    font-size: 30px;
    font-weight: bold;
}

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

.producto-descripcion {
    font-size: 18px;
}

.producto-precio {
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}

.copyright {
    color: #ffffff;
    font-size: 13px;
    margin: 20px;
}

form {
    margin: 40px 0;
}

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

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

.checkbox {
    margin: 20px 0px;
}

.send {
    width: 40%;
    padding: 15px 0px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.send:hover {
    background: darkorange;
    transform: scale(1.2);
}

table {
    margin: 40px 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

td,
th {
    border: 1px solid #000000;
    padding: 8px 15px;
}

/** CSS para nuestra home */

.banner {
    width: 100%;
}

.principal {
    padding: 3em;
    background: #fefefe;
    width: 940px;
    margin: 0 auto;
}

.titulo-principal {
    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;
}

.utensillos {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#fefefe, #888888);
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

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

.diferenciales {
    background: #888888;
}

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

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

.items {
    line-height: 1.5;
}

.items:before {
    content: '★';
}

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

.imagen-diferenciales {
    width: 60%;
    transition: 400ms;
    box-shadow: 10px 10px 20px 10px #000000;
}

.imagen-diferenciales:hover {
    opacity: 0.3;
}

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

/*
p {
    // Etiqueta menor peso posible 
    color: red;
}

form p {
    // Etiqueta + Etiqueta suma de los pesos relativos 
    color: blue;
}

.test {
    // Clase mas peso que las etiquetas 
    color: green;
}

p.test {
    // etiqueta mas clase  suma de los pesos relativos
    color: gold;
}

#test {
    // Id el mayor peso posible definido en el archivo css, solo superado por la definición del estilo inline en el archivo html 
    color: pink;
}
*/

Hola, si no me equivoco este .principal esta de mas

.principal {
    background: #fefefe;
    padding: 3em 0;
}

esta debajo de .header

Hola, gracias por la respuesta, y si bien es cierto que ese principal esta demás, no es eso, porque al eliminarlo el problema persiste.

Podrías subir una captura de pantalla para saber a que te refieres con una "franja"?, Por favor.

me parece que tienes otro archivo css que no has compartido acá, puedes compartir restet.css por aquí? por favor. Tengo una alta sospecha que esté allí el problema.

Saludos compañero, aquí te dejo la solución:

.video { width: 560px; margin: 0 auto; padding: 1rem; }

Que fue lo que pasó? pues le estabas aplicando un margen que excedía el tamaño disponible para el DIV . video por lo que se aplicó la anterior configuración recuerda cuando explicaron algo del box sizing (los márgenes, padding se le suman al tamaño del contenedor)

Saludos!

Gracias francisco, efectivamente el problema estaba ahí.