外部CSS样式表对指定元素不生效的问题求助

我遇到一个问题：一段用于格式化带内边距、边框的可点击图片的CSS，在HTML内联时完全正常，但移到外部样式表后，.thumb-container及其hover效果就失效了。

外部样式表的引用是正确的——body的背景图和h1的颜色都能正常显示，唯独.thumb-container相关样式不起作用。我用VS Code检查过代码没发现问题，尝试用Chrome调试但经验不足没找到原因。

我的CSS代码如下：

body {
  background-image: url('/assets/images/backgrounds/parchment.gif');
  background-repeat: repeat;
}
                
h1 {
  color: #8c510d; 
}

.thumb-container {/* The original Thumbnail Container */
  width: 300px;
  height: 180px;
  overflow: hidden;
  padding: 5px;
  border: 5px solid #6e1bb1;
  border-radius: 8px;
  margin: 20px;
}
        
.thumb-container:hover { /* Border shows on Hover */
  box-shadow: 0 0 2px 5px #1d9ca1
}

有两个对比页面：一个是内联样式正常工作的页面，另一个是移除内联样式改用外部样式表后失效的页面。

内容的提问来源于stack exchange，提问作者DillyDally