Tamaño del menú

VH height: 100vh; significa que la altura de este elemento es igual al 100% de la altura de la ventana gráfica.

ejemplo: height: 50vh; si la altura de su pantalla es de 1000 px, la altura de su elemento será igual a 500 px (50 % de 1000 px).

CALC height: calc(100% - 100px); calculará el tamaño del elemento utilizando el valor del elemento.

ejemplo: height: calc(100% - 100px);si la altura de su pantalla es de 1000 px, la altura de su elemento será igual a 900 px (100 % de 1000 px y menos 100 px).

Joseph, puedes ver las dimensiones del logo haciendo click derecho en la imagen - propiedades - detalles. Verás que el height de la imagen es de 72 pixeles, por lo que si el logo no tiene ningún margin, ni padding, ni tampoco el menú de navegación el ancho del menú será la altura del logo. Espero haberme dado a entender, sí está bastante confusa la explicación del profesor. Para estilizar el banner yo preferí usar un flex-box y poner la imagen como background, mucho más sencillo, lo dejo por si le sirve a alguien:

<section class="banner">
            <h2 class="banner__title">Reaproveche mejor los alimentos</h2>
            <p class="banner__puntos">. . .</p>
        </section>

.banner {
    background-image: url("../img/banner.jpg");
    background-size: cover;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.banner__title,
.banner__puntos {
    color: #fdfdfd;
    text-align: center;
    font-family: Pacifico, cursive;
    font-size: 5.0625rem;
    font-weight: 400;
    line-height: 50px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.75);
}