Why do my hover effects stop working when my media queries kick in

I've been playing about with media queries in hopes of getting my head around creating a responsive page.

I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?

html {
  scroll-behavior: smooth;

}

body{
  font-family: 'Nunito';
  background: linear-gradient(#47585B, #E8EFF0);

}


h1 {
  letter-spacing: 2px;
}

h2 {
  letter-spacing: 2px;
  /* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0px;
  margin-top: 0.1em;
  padding-top: 0.25rem;
  background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
  background-color: #e6763c90;
  box-sizing: border-box;
  padding: 0 2rem;
  box-shadow: 2px 0px 100px 10px #e6763c90;
  text-align: center;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

ul {
  margin: 0;
  padding: 20px;
  list-style: none;
  /* border: 1px solid black; */

}

a {
  color: black;
  text-decoration: none;
}
li {
  display: inline-block;
  padding: 7px;
  margin: 0 0 0 2.5em;
  text-align: center;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.container {
  height: 70vh;
  padding: 10rem;
  text-align: center;
  /* border: 1px solid black; */

}

.dropDown{
  display: none;
}

/* On hover animations */
li:hover{
  transform: scale(1.08);
}

/* Smaller Screen */

@media (max-width: 1100px) {
  header {
    background-color: #e6763c90;
    box-sizing: border-box;
    padding-left: 0.25rem;
    right: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  li {
    display: inline;
    margin: 2rem;
    z-index: 1000;
  }

  ul {
    position: relative;
        bottom: 1.4rem;
  }
  
/* Adjust underline on smaller screen */

  h1::after{
    content: "";
    display: none;
    position: absolute;
    width: 100%;
    margin-top: 1.5em;
    left: 0;
    height: 0px;
    padding-top: 0.25rem;
    background: #47585B
}

li::after{
    content: "";
    position: absolute;
    width: 100%;
    margin-top: 1.5em;
    left: 0;
    height: 0px;
    padding-top: 0.25rem;
    background: linear-gradient(90deg, #47585B, #47585B20);
    z-index: 10000;
  }
}

/* Mobile */

@media (max-width: 800px) {
  header {
    background-color: #e6763c90;
    box-sizing: border-box;
    padding-left: 0.25rem;
    right: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }


  .navbar {
    display:none;
    margin:1.2rem;
  }


/* Adjust underline on mobile */
  h1::after{
    content: "";
    position: absolute;
    width: 100%;
    margin-top: 0.1em;
    left: 0;
    height: 0px;
    padding-top: 0.25rem;
    background: #47585B
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
    <link href="styleSheet.css" rel="stylesheet"></link>
    <title>Original Tombstones</title>
  </head>
  <body>
<header>
  <h1 class=""><a href="#home">Original Tombstones</a></h1>
  <ul class="navbar">
    <li><a href="#new">New Memorials</a></li>
    <li><a href="#additionals">Additionals</a></li>
    <li><a href="#renovations">Renovations</a></li>
    <li><a href="#contact">Contact Us</a></li>
  </ul>
</header>
<div class="container" id="home">
  <h2>About Us</h2>
</div>
<div class="container" id="new">
  <h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
  <h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
  <h2>Renovations</h2>
</div>
<div class="container" id="contact">
  <h2>Get In Touch</h2>
</div>

  </body>
</html>

I apologise in advance if my code looks messy but I've not got my head round that bit yet!

Cheers!

Solution

So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.

But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .