爲什麼我的CSS媒體查詢會破壞樣式？

Question

我試圖讓我的側邊欄流體，所以它與瀏覽器窗口調整，並且一切似乎都很好，除了添加了媒體查詢，我的CSS樣式中斷，但是當我將查詢它回到了我的樣式表的規範樣式。有人能看我的代碼並告訴我我做錯了什麼嗎？提前致謝！

順便說一句，當我將第二個結束大括號添加到#rightandoveroverview媒體查詢時，樣式會回到它應該的樣子，但流動性不起作用。會是什麼呢？

#righthandoverview { 
position: absolute; 
top: 91px; 
right: 0px; 
width: 20%; 
height:215px; 
background-color: white; 
webkit-box-shadow: 0px 4px 5px -5px #777; 
-moz-box-shadow: 0px 4px 5px -5px #777; 
box-shadow: 0px 4px 5px -5px #777; 
} 

@media screen and (max-width:830px) and (min-width:100px) { 
#righthandoverview { 
    float: left; 
    width: 30%; 
    background-color: yellow; 
    margin-top: 5px; 

} 





#righthandoverview ul { 
position: absolute; 
display: inline; 
float: left; 
font-family: klavika-light; 
list-style-type: none; 
text-decoration: none; 
white-space: nowrap; 
} 

@media screen and (max-width:830px) and (min-width:100px) { 
#righthandoverview ul { 
    float:left; 
    width:30%; 
    background-color: yellow; 
    margin-top: 10px; 

} 
} 




#righthandoverview ul li > a { 
display: inline; 
text-decoration: none; 
color:#8BAFDA; 
} 

#righthandoverview ul li { 
padding-bottom: 6px; 
} 

Answer 1

看起來你缺少一個支架來結束你的第一個媒體查詢

@media screen and (max-width:830px) and (min-width:100px) { 
#righthandoverview { 
    float: left; 
    width: 30%; 
    background-color: yellow; 
    margin-top: 5px; 

} 





#righthandoverview ul { 
position: absolute; 
display: inline; 
float: left; 
font-family: klavika-light; 
list-style-type: none; 
text-decoration: none; 
white-space: nowrap; 
} 
} 

Answer 2

你錯過下面的代碼支架，我將它。

@media screen and (max-width:830px) and (min-width:100px) { 
     #righthandoverview { 
      float: left; 
      width: 30%; 
      background-color: yellow; 
      margin-top: 5px; 

     } 
    }