Help with Problem

So I have an unordered list, with list items containing hyperlink tags

<ul>
 <li> 
  <a href="#">Tag</a>
 </li>
<ul>

On my LI tag, I have a border bottom set to the background color.

When my link is hovered I want to change the color of it?

How do I change the previous elements style?

ul li a:hover{
 text-decoration: none;
 color: #Blue;
}
 
ul li a:hover li{
 border-bottom: solid 5px #Green;
}

Hello, this is my first post! Great site!

I am stuck with stretched text as a result of applying transform: scaleY(2).

I have the following html:

<div class="item-box">
    <div class="category-item">
        <h2 class="title">
            <a href="#" title="Show product">
                label
            </a>
        </h2>
        <div class="picture">
            <a href="#" title="Show product">
                <img alt="Picture for product" src="path" title="Show product">
            </a>
        </div>
    </div>
</div>

And the CSS:
 

I have a site @ https://www.weedshopinc.com On that site i have some IE issues and believe it or not, some firefox2 issues. Let me start with IE issues:
In the boxes on the front page, you will see text like "News" and "Member Login". I have an image that creates the color behind that text in the boxes. Notice how the color (image) does not stretch to the right side of the box. It stops short in IE. In firefox2, that is not seen. Here is the CSS for those colors (images):

.box_header {
font-size:15px;
margin:0;
padding:4px;

Please don't say I should have multi line indented coding. My text editor allows deleting & copying a line very easily.

I have narrowed down my problem to the following;

/*1*/<style type="text/css"> .in { position: fixed; width: 100%; left:70%; top: 26%; } </style>
/*2*/<style type="text/css"> .sh { position: fixed; width: 100%; left: 40%; top: 26%; } </style>
 
/*3*/
 
/*4*/<div class="in"> <select name="inout" style="width: 10%; height: 5mm"; >
/*5*/<option value="">Select</option>
/*6*/<option  value="in">In</option>
/*7*/<option  value="out">Out</option>

My website developed by the Bootstrap4, but the page is confusing on IE, is there any way to solve this problem quickly?

https://succulentsaddiction.com/soil-mix/