大画面でCSSが正常に動作しない

Question

レスポンシブウェブサイトを作成しようとしています。すべてうまくいっていますが、大きな画面ではリンクスタイルが機能しません。リンクスタイルは別々のCSSファイルにあり、携帯電話やラップトップ画面に適しています。問題がどこにあるか分かりますか？助けをよろしくお願いします。水平ナビゲーション・メニューやリンクのスタイルとCSSファイルの一部のための私のHTMLコードの下

：

.topnav, .topnav a:link{ 
 
    background-color: #bb0303; 
 
    overflow: hidden; 
 
    color: white; 
 
} 
 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    color: white; 
 
} 
 
.topnav a:hover { 
 
    background-color: #f6a9a9; 
 
    color: white; 
 
} 
 
.topnav a:visited, .optionL a:visited { 
 
    color: white; 
 
} 
 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    .topnav a:not(:first-child) {display: none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 500px) { 
 
    .topnav.responsive {position: relative;} 
 
    .topnav.responsive a.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 

 
@media (max-width: 2560px) and (min-width: 1100px) { 
 
    #container {width:1050px; background-color: #bb0303;} 
 
    #sidebar {width:21%; } 
 
    #contentpages {width:76.438%;} 
 
    #topbar img {width: 100%;} 
 
    .box1 {width: 22%;} 
 
    .box2 {width: 32%; text-align: left;} 
 
    .box3 {width: 28%;} 
 
    .box4 {width: 31%;} 
 
} 
 

 
@media (max-width: 1100px) and (min-width: 1000px) { 
 
    #container {width:950px;} 
 
    #sidebar {width:30%;} 
 
    #contentpages {width:55%;} 
 
    #topbar img {width: 100%;} 
 
} 
 
@media (max-width: 1000px) and (min-width: 800px) { 
 
    #container {width:750px; background-color: #bb0303;} 
 
    #sidebar {width:30%;} 
 
    #contentpages {width:67%;} 
 
    #topbar img {width: 100%;} 
 
} 
 
@media (max-width: 800px) and (min-width: 500px) { 
 
    #container {width:450px;} 
 
    #sidebar, 
 
    #contentpages {width:100%; background-color: blue;} 
 
    #topbar img {width: 100%;} 
 
    .box5 {margin-left: 15%;} 
 
} 
 

 
@media (max-width: 500px) { 
 
    #container {width:100%; background-color: #bb0303;} 
 
    #sidebar, 
 
    #contentpages {width:100%;} 
 
    #topbar img {width: 100%;} 
 
    .box1 {margin-bottom: 5%;, } 
 
    .box2 {height: 25%; margin-bottom: 5%;} 
 
    .box3 {margin-bottom: 5%;} 
 
    .box4 {margin-bottom: 5%;} 
 
    .box5 {margin-left: auto; margin-right: auto;} 
 
} 
 

 
a:link { 
 
    color: #CD5C5C; 
 
} 
 

 
a:visited { 
 
    color: #B22222; 
 
} 
 

 
a:hover { 
 
color: #F08080; 
 
} 
 

 
a:link, a:visited, a:hover, a.tlink:link, a.tlink:visited, a.tlink:hover { 
 
    text-decoration: none; 
 
} 
 

 
a.tlink:link, a.tlink:visited { 
 
    color: white; 
 
} 
 

 
#topbar { 
 
    color: white; 
 
    background-color: #bb0303; 
 
    padding: 10px; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
}

<div class="topnav" id="myTopnav"> 
 
    <a href="a.html">A</a> 
 
    <a href="b.html">B</a> 
 
    <a href="c.html">C</a> 
 
    <a href="d.html">D</a> 
 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div>

Answer 1

@media screen and (max-width: 800px) {これは、それだけで800ピクセルまで、小さな画面上で動作しますと言います。

さまざまな値を持つようなルールがいくつかありますが、最大幅の値がないルールはないようですので、非常に大きな画面（定義した最大値よりも大きい、2560px ）何も適用されません。

NNNpx以降のすべてに適用されるため、最大幅を持たないルールを少なくとも1つ作成することをお勧めします。