500px以下の幅の時文字の色が白くならない
500px以下の幅の時文字の色が白くならないです。
htmlに
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Home</title>
</head>
<body>
<div id="page-container">
<nav class="menu">
<div class="hamburger">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
</div>
<header>
<h1>WEB SITE</h1>
</header>
<div id="nav-content">
<ul class="sidebar-ul" id="menu">
<li>
<a class="home" href="home.html">Home</a>
</li>
<li>
<a class="profile" href="profile.html">Profile</a>
</li>
</ul>
</div>
<ul id="social">
<li>
<a class="contact" href="">
<i class="icon_head" aria-hidden="true"></i>Email</a>
</li>
<li>
<a class="contact" href="">
<i class="icon_head" aria-hidden="true"></i>Facebook</a>
</li>
</ul>
</nav>
<main>
<div id="carousel-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="test1.jpg" alt="Arch">
<p>WELCOME</p>
</div>
<div class="item contain">
<img class="img-responsive" src="test2.jpg" alt="Nature">
<p>MY SITE</p>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
cssに
@media all and (min-width: 500px) {
body,
html {
margin: 0;
height: 100%;
}
#page-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas: "NAV MAIN";
height: 100%;
}
nav {
grid-area: NAV;
background-color: black;
height: 100%;
float: left;
display: grid;
grid-template-rows: 1fr 1fr 2fr 2fr;
grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
}
.nav-unshown {
display: none;
}
main {
grid-area: MAIN;
}
header {
grid-area: HEADER;
}
header h1 {
color: white;
text-align: center;
font-size: 30px;
}
#menu {
grid-area: MENU;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0px;
}
#menu>li {
margin: 10px 10px;
padding: 2px 0px;
}
#menu>li:hover>a {
color: white;
text-decoration: none;
}
#social {
grid-area: SOCIAL;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0px;
}
#social>li {
margin: 10px 10px;
padding: 2px 0px;
}
#carousel-container {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
.icon_head {
padding-right: 10px;
}
.carousel {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-inner>.item {
height: 100%;
}
.carousel-inner>.item>img {
height: 100%;
}
.item {
position: relative;
}
.item p {
position: absolute;
color: white;
font-weight: bold;
font-size: 3em;
top: 20%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
}
@media all and (max-width: 500px) {
#page-container {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "NAV MAIN";
height: 100%;
}
nav {
grid-area: NAV;
background-color: white;
height: 100%;
float: left;
display: grid;
grid-template-rows: 1fr 1fr 2fr 2fr;
grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
}
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
#nav-open span,
#nav-open span:before,
#nav-open span:after {
position: absolute;
height: 3px;
width: 25px;
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;
height: 100%;
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
#nav-input:checked~#nav-close {
display: block;
opacity: .5;
}
#nav-input:checked~#nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}
}
と書きました。ブラウザの幅を500px以下にした時、<h1>WEB SITE</h1>のWEB SITEの文字が黒くなってしまい、最初のmin-width: 500pxのCSSで指定した様に白くならないです。最初のCSSで指定したものを全部ではないですが、max-width: 500pxの方でも適用したいです。（書き換えたい部分は新たにmax-width: 500pxの方に追記しています）なぜ適用されないのでしょうか？メディアクエリの書き方が間違っているのでしょうか？