Personal project issue-search icon not moving when adjusting class selector properties

HTML-CSS
1

I’m having a problem with my personal project code I added an icon from an external library google fonts and in my html it looks like this
My html

<li>
  <a href="#" class="nav-color">
     <span class="search-container">
  <i class="material-symbols-outlined material-icon">search</i>
        </span>
       Search`

This is everything that defines the icon
Now my CSS styles

.material-symbols-outlines{
  margin-top:5px;
  position:relative;
  top:3.6px; /*top Moves the element downward from its normal               position.*/
  bottom:0px; /* Moves the element upward from its normal                    position*/
  right:0px; /* Moves the element right  from its normal                    position*/
  
  left:0px; /* Moves the element to the left from its                       normal position*/
  
}
If i were to adjust any of the top bottom right left properties it doesnt move can anyone help with this problem
2

I analysed my code and I have spotted that my class selector says material symbols outlines it seems to be working now I also spotted that right moves it to the left and left moves it to the right so please ignore the comments but when I adjust my icon to the left more than like 5px it won’t move anymore is that how the property works or?

3

do you have it live someplace?! if so then share that link as well, happy coding :slight_smile: