

500px以下の幅の時文字の色が白くならないです。  
htmlに

[code]

      <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>
    
[/code]

cssに

[code]

    @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);
      }
    }
    
[/code]

と書きました。ブラウザの幅を500px以下にした時、`<h1>WEB SITE</h1>`のWEB SITEの文字が黒くなってしまい、最初のmin-
width: 500pxのCSSで指定した様に白くならないです。最初のCSSで指定したものを全部ではないですが、max-width:
500pxの方でも適用したいです。（書き換えたい部分は新たにmax-width:
500pxの方に追記しています）なぜ適用されないのでしょうか？メディアクエリの書き方が間違っているのでしょうか？


CC BY-SA 3.0
2018-02-27T13:00:41.630
42043
2019-12-09T01:17:12.177
2019-12-09T01:17:12.177
32986
27562
question
css
500px以下の幅の時文字の色が白くならない


max-width に、`h1のスタイル指定`が無いような、以下max-width に、h1追加して見ました。  
（スニペットを実行して最大化すると確認できます。）

[code]

    @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;*/
            background-color: black;
            height: 100%;
            float: left;
            display: grid;
            grid-template-rows: 1fr 1fr 2fr 2fr;
            grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
        }
        header h1 {
            color: white;
            text-align: center;
            font-size: 30px;
        }
        #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);
        }
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2018-02-27T14:32:50.940
42045
2018-02-27T14:32:50.940
22793
42043
answer