So I have my nav bar here

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>

Then I have my product items here

html

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

I only inserted 1 but there are 4 of these total. Im doing the css for a media query to show on screen size of max width 480px. My nav bar is located at the top of the layout and my products are located at the bottom. My nav bar is set to inline and for the media query i'm changing the products div from display grid/columns to flex/flex direction column. The problem I'm having is that when I change the products to flex column the css is also changing the nav bar to a row layout and I have no idea why this is happening. These 2 separate divs don't have any of the same class names or anything other than they both have tags but im not targeting the tag.

This is the css that changes it

css

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

This is my nav bar 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;
}