Duda en caja de productos | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

Qué tal compañeros!

Hasta este punto para introducir la información contenida en cada "caja de productos", Christian solo creó una lista no ordenada "ul>" y dentro de cada "li>" introdujo tanto el título, la imagen, la descripción y el precio, quedando los tres "productos" de forma vertical, sin embargo, para practicar un poco los conceptos revisados hasta el momento, quise modificar un poco el código, así, creé 3 "ul>" y un "li>" para cada elemento de la caja, como lo comparto en el código que adjunto al final. Del mismo modo, para practicar la herramienta que se utilizó hace un par de videos de crear un bloque "div class="caja"> dentro del "header> para centrar horizontalmente el logo y la barra de navegación ambos como un solo elemento, englobé las 3 listas dentro de un bloque "div class="products_box">, pero al aplicar los mismas especificaciones NO se centra en el ancho de la pantalla, con esto me refiero a darle un width:940px, position:relative y margin: 0 auto.

Por lo que quisiera saber ¿por qué NO funciona en este caso?

Saludos!

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8"> 
    <title>Products- Alura BarberShop</title>
    <link rel="stylesheet" type="text/css" href="reset.css"> 
    <link rel="stylesheet" type="text/css" href="products.css">

</head>

<body>
    <header>
        <div class="box_inside_header"> 
            <h1><img src="images/logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="indexCSS_v1.2(css_href).html">Home</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

    </header>


    <main>

        <div class="products_box">

            <ul class="products">
                <li><h2> Haircut</h2></li>
                <li><img src="images/cabello.jpg"></li>
                <li> <p> Stylish cut</p><p> $10.00</p></li>
            </ul>

            <ul class="products">
                <li> <h2>Beard</h2></li>
                <li> <img src="images/barba.jpg"></li>
                <li> <p>Beard cut</p><p>$8.00</p></li>
            </ul>

            <ul class="products">
                <li><h2>Haircut + Beard</h2></li>
                <li> <img src="images/cabello+barba.jpg"></li>
                <li><p>Promo</p><p>$15.00</p></li>
            </ul>

        </div>
    </main>

</body>

</html>

Mientras que el CSS es:

header{
    background: #BBBBBB;
    padding:20px 0;
}

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


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

nav li{
    text-transform: uppercase;
    display:inline;
    font-size: 22px;
    text-decoration: none;
    font-weight: bold;
    margin: 0 0 0 15px;

}

nav a{
    color: #000000;
    text-decoration: none;
}

.products_box{
    width: 940px;
    position: relative;
    top:20px;
    margin: 0 auto;
}

.products{
    text-decoration: none;
    display:inline-block;
    text-align: center;

}
.products h2{
    color:blue;
    font-weight:bold;
    font-size: 20px;

}