Why are my 2 separate elements being change by 1 styling in my css?-CodePudding

So I have my nav bar here

html

<div >
    <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 > 
    <a href="fridge.html"><figure >
        <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;
}

CodePudding user response：

You apply a double style with this selector

.nav ul li, a { }

You need .nav ul li a { } no ?

And better use <li><a></a></li>

CodePudding user response：

Does this the effect you want?

You max the sequence, you should use inside the <li> element since the child element of <ul> should be <li>

.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;
}
.products {
   display: flex;
   flex-direction: column;
   margin-top: 0px
}

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


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