Así que tengo mi barra de navegación aquí.

html

 <div class="nav"> <nav> <ul> <a href="index.html"><li>Home</li></a> <a href="fridge.html"><li>Refrigerators</li></a> <a href="stove.html"><li>Stoves</li></a> <a href="dishwasher.html"><li>Dishwashers</li></a> <a href="hvac.html"><li>HVAC</li></a> </ul> </nav> </div>

Entonces tengo mis artículos de producto aquí.

html

 <div class="products"> <a href="fridge.html"><figure class="fridge"> <img src="imgs/fridge.jpeg" alt="Refrigerators"> <figcaption>Refrigerators</figcaption> </figure></a> </div>

Solo inserté 1 pero hay 4 de estos en total. Estoy haciendo el css para que una consulta de medios se muestre en un tamaño de pantalla de ancho máximo de 480 px. Mi barra de navegación se encuentra en la parte superior del diseño y mis productos se encuentran en la parte inferior. Mi barra de navegación está configurada en línea y para la consulta de medios estoy cambiando el div de productos de cuadrícula/columnas de visualización a columna de dirección flexible/flexible. El problema que tengo es que cuando cambio los productos a la columna flexible, el css también cambia la barra de navegación a un diseño de fila y no tengo idea de por qué sucede esto. Estos 2 divs separados no tienen ninguno de los mismos nombres de clase ni nada más que ambos tienen etiquetas, pero no estoy apuntando a la etiqueta.

Este es el css que lo cambia.

CSS

 .products { display: flex; flex-direction: column; margin-top: 0px }

Esta es mi barra de navegación css

CSS

 .nav ul li, a { display: inline; list-style: none; text-decoration: none; font-size: 20px; margin-right: 10px; color: #000; position: relative; top: 80px; right: -80px; }