h1标题在992px和up媒体查询中不起作用

Question

我创建了一个网站，以为我已经差不多完成了，突然h1标题停止了992px和up媒体查询。我不知道是什么原因造成的。这是小提琴：https://jsfiddle.net/kcloyd/3cgbu7nd/。这是我第一次来这里，如果我没有正确输入所有内容，请原谅。如果你让我知道还能做什么，我会解决的。

a {
color: inherit;
text-decoration: none;
}
html{
margin: 0;
padding: 0; 
box-sizing: border-box;
}

body {
display: grid;
margin: 30px 30px;
color: #595959;
font-family: 'Roboto', sans-serif;
background: url(images/sparkles-background-big.png) no-repeat; 
background-size: cover;
min-height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}

img {
max-width: 100%;
}

.top-nav-container {
display: grid;
grid-template-areas: 
'logo name space burger-links';
grid-template-columns: 150px auto auto 60px;
}
#logo  {
display: grid;
grid-area: logo; 
height: 100px;
margin-top: 20px;
padding-right: 20px;
}

#name {
display: grid;
grid-area: name;

margin-top: 25px;
margin-left: 30px;
height: 100px;
}
h1 {

font-size: 5vw; 
font-family:'Shadows Into Light Two';
letter-spacing: 5px;

}
.burger-container {
display: grid; 
position: absolute;
right: 40px;
margin-top: 30px;
}   

.burger {
display: grid;
cursor: pointer; 
}

.burger div {
width: 70px;
height: 7px;
margin: 4px;
background-color: #aa1226;
transition: all 0.3s ease;
}
.burger-links {
display: grid;
grid-area: burger-links;
position: fixed;
z-index: 1;
right: 0px;
max-height: 30vh;

background-color: rgba(243, 243, 243, 0.85);
align-items: center;
text-align: center;
width: auto;
transform: translateX(100%);
transition: transform 0.5s ease-in;
list-style: none;
}

.burger-links li {
display: grid;
justify-content:flex-start;
}

.burger-links a {
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: #aa1226;
font-weight: 600;
border-bottom: 1px solid #595959;
padding: 1em 2em;
}  
.burger-links :last-child a {
border: none;
}

#big-nav {
display: none;
}

.nav-active {
transform: translateX(0%);
}

@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}

.main {
display: grid;
grid-gap: 20px;
grid-template-areas: 
'group-pic'
'gigs';
grid-template-columns: 100%;
width: 700px;
margin-left: auto;
margin-right: auto;

}
.group-pic {
grid-area: group-pic;
}
.main .group-pic {
display: grid;
}
.gigs {
display: grid;
grid-area: gigs;
background-color: rgba(192, 192, 192, 0.1); 
box-shadow: 3px 5px #efebeb;

}
.gigs h3 {
font-size: 40px;
color: grey;
padding-left: 35px;
}

.gigs li {
display: grid;
justify-content:flex-start;
}
.gigs a {
font-size: 40px;
color: grey;
}

footer {
display: grid;
grid-template-areas: 
'copyright  facebook';
grid-template-columns: 70% 30%;
margin-top: 100px;
height: 40px;
}

#copyright {
display: grid;
grid-area: copyright;
padding-left: 70px;
}

#copyright, h3 {
color: black;
font-size: 20px;
font-weight: 600;  
}

#facebook-icon  {
display: grid;
grid-area: facebook;
padding-left: 50px;
}
#facebook-icon img {
max-height: 100px
}
/* ABOUT */
.mainAbout #band {
display: table;
margin: auto;
max-width: 600px;
margin-bottom: 200px;
margin-top: 10px;
}
#band {
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-top: 10px;
background-color: rgba(192, 192, 192, 0.1); 
box-shadow: 3px 5px #efebeb;
}
.bandTitle {
text-align: center;
font-size: 24px;
font-weight: 600;

}
.aboutLists  {
font-size: 20px;
font-weight: 600;
}

.aboutPara {
font-size: 20px;
font-weight: 600;
font-style: italic;
letter-spacing: 1px;
}

/* CONTACT */
.mainContact {
display: table;
margin: auto;
max-width: 600px;
margin-bottom: 450px;
}
#contact {

padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-top: 10px;
margin-bottom: 100px;
background-color: rgba(192, 192, 192, 0.1); 
box-shadow: 3px 5px #efebeb;
text-align: center;

}
.contactTitle {
font-family: 'Roboto', sans-serif;
font-size: 26px;
font-weight: 600;

}

.contactPara {
font-size: 24px;
font-weight: 600;
font-family: 'Roboto', sans-serif;
letter-spacing: 2px;
line-height: 34px;
}
/* MUSIC */

.mainMusic {
margin: auto;
max-width: 600px;
}
#video {
margin-bottom: 20px
}

/* GIGS */
.mainGigs {
display: grid;
grid-gap: 20px;
grid-template-areas: 
'gigs'
'gigs-pic';
grid-template-columns: 100%;
width: 700px;
margin-left: auto;
margin-right: auto;    
}

.mainGigs #gigsBox {
display: grid;
grid-area: gigs;
background-color: rgba(192, 192, 192, 0.1); 
box-shadow: 3px 5px #efebeb; 
margin-bottom: 70px;
padding-left: 30px;
list-style-type: none;
}

#gigsBox li {

list-style-type: none;
}
.mainGigs #gigsBox h3 {

padding-left: 30px;
}

.mainGigs img {
display: grid;
grid-area: gigs-pic;
margin-bottom: 150px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.burger-links {
height: 25vh;
top: 10vh;
} 

.burger-links a {
font-size: 24px;

} 

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.burger-links {
height: 25vh;
top: 10vh;

}

.burger-links a {
font-size: 24px;

} 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.burger-links {
height: 65vh;
top: 20vh;
padding: 1em 1em;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

body {
font-family: 'Roboto', sans-serif;
background: url(images/sparkles-background-big.png) no-repeat; 

}

.top-nav-container {
display: grid;
grid-template-areas: 
'logo name space burger-links';
grid-template-columns: 160px auto auto auto;
margin-bottom: 50px;
}

.top-nav-container #logo  {
height: 100px;
padding-right: 20px;
margin-top: 0px;
}
#name {
margin-top: 25px;
margin-left: 30px;
}
h1 {
font-size: 5vw; 
}

#big-nav {
display: inline-block;
text-decoration: none;
list-style: none;
text-align: justify;
min-width: 500px;
}

#big-nav li {
display: inline-block; 
padding-right: 40px
} 

#big-nav:after {
content: '';
display: inline-block;
width: 100%;

}

#big-nav li a {
font-size: 26px;
font-weight: 900;
letter-spacing: 1px;
text-align: center;
color: #aa1226;
transition:  0.25s;
}
#big-nav a {
opacity:1;

}

#big-nav a:hover {
opacity:0.51;

}

.burger-container {
display: none;
}

.burger-container {
display: none;
}

.main {
display: block;
width: auto;
margin: auto;
margin-top: 20px;
}

.stoneys2 {
display: block;
box-shadow: 5px 6px rgba(51, 51, 51, 0.3);
}
.gigs {
display: none;
}

.mainAbout #band {
max-width: 800px;
}

.mainContact {
margin-bottom: 50px;
}     
#contact {
margin-bottom: 30px;
}

footer {
margin-top: 20px;
}

#facebook-icon  {
display: grid;
grid-area: facebook;
padding-left: 200px;
}    

.mainMusic {
display: flex;
max-width: 1350px;
}   

#iframeHolder1, #iframeHolder2 {
flex: 1;
padding-right: 20px;
}

.mainGigs {
display: grid;
grid-template-areas: 
'gigs'
'gigs-pic';
grid-template-columns: 100%;
width: 700px;
margin-left: auto;
margin-right: auto;    
}

.mainGigs  #gigsBox {
display: grid;
grid-area: gigs;
background-color: rgba(192, 192, 192, 0.1); 
box-shadow: 3px 5px #efebeb; 
margin-bottom: 0px;
}

.mainGigs, #gigsbox, h3 {
font-size: 30px;
color: #595959;
padding-left: 55px;
}

.mainGigs, #gigsbox, a {
font-size: 26px;
}

.group-pic {
grid-area: gigs-pic;
}

.main .group-pic {
display: grid;
}
}
<!DOCTYPE html>
<html>

<head>
<title>Sycamore Alley</title>

<!-- Normalize.css -->
<link rel="stylesheet" type="text/css" href="normalize.css">

<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="style.css">

<meta name="description" content="Sycamore Alley Band website.">

<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

</head>
<body>

<div class='top-nav-container'>

<a href="index.html">                
<img src="images/tree-w-sparkles.png" alt="picture of sycamore tree" id="logo">  
</a>

<h1 id='name'><a href='index.html'>Sycamore Alley</a></h1>


<div class='link-wrapper'>        

<ul id='big-nav'>
<li><a href="about.html">about</a></li>   
<li><a href="music.html">listen</a></li>
<li><a href="gigs.html">gigs</a></li>
<li><a href="contact.html">contact</a></li>
</ul>

</div>

<div class='burger-container'>

<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>

<ul class='burger-links'>
<li><a href="about.html">about</a></li>   
<li><a href="music.html">listen</a></li>
<li><a href="gigs.html">gigs</a></li>
<li><a href="contact.html">contact</a></li>
</ul>

</div>  

</div><!-- top-nav-container-->

<script src='script.js'></script>

<main class='main'>


<img src='images/stoneys%20w%20bar.png' class='group-pic' alt='picture of sycamore alley bandmembers'>

<div class="gigs">
<h3>gigs</h3>
<ul>
<li><a href='http://themarketatlibertyplace.com/'> <b>Market at Liberty Place&#126;</b><br>Kennett Square PA<br>9/11/20 - 6-10pm</a></li><br><br>

<li><a href='https://www.facebook.com/pages/category/Farmers-Market/Bellefonte-Farmers-Market-244701048977/'><b>Old Stone Cider&#126;</b><br>Lewisvillie PA<br>9/25/20 - 5:30-8:30pm</a></li>
</ul>
</div>

</main>


<footer id='big-footer'>
<h3 id='copyright'>copyright &copy;2020 sycamore alley</h3>

<a href='https://www.facebook.com/sycamore.alley/' id='facebook-icon'><img src='images/facebook-sparkle.png'></a>

</footer>

</body>
</html>

Answer 1

您在>的媒体查询中有这个CSS规则；992:

.gigs {
display: none;
}

这也隐藏了h1。。。