我正在尝试将某种样式规则应用于媒体查询中的三个#id选择器，但是似乎不起作用。但是，如果我在查询之外执行相同的操作，它就可以正常工作（但是不幸的是，我只需要针对特定屏幕尺寸使用该规则。我要达到的目的是根据图像尺寸调整div的边距屏幕尺寸低于767像素（左右两侧有间隙）。
谢谢！
body { background-color: #fffffe; } .container{ margin: 0; } /** HEADER **/ #header-nav{ background-color: #5d46ea; height: 78px; border: 0; } #logo-img { /** Logo **/ background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat; width: 150px; height: 62px; margin-left: 20px; margin-right: 20px; } .navbar-brand h1 { /** Blog Name **/ color: #fd9200; font-family: 'oxygen', sans-serif; font-size: 1.4em; font-weight: bold; text-transform: uppercase; padding: 10px; } #nav-list a { color: #fd9200; font-weight: bold; background: #5d46ea; } #nav-list a:hover{ background: #684fff; } .custom-toggler.navbar-toggler { border: 1px solid rgb(253, 146, 0); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /** HOME PAGE **/ .container { margin-top: 10px; } .jumbotron { background-color: #ffffff; border: 2px solid #5d46ea; box-shadow: 0 0 10px #5d46ea; padding: 0; margin: 0; } .row { margin-top: 15px; } #main-tile, #dessert-tile, #smoothie-tile { height: 250px; width: 100%; margin-bottom: 15px; position: relative; border: 2px solid #5d46ea; box-shadow: 0 0 10px #5d46ea; overflow: hidden; } #main-tile:hover, #dessert-tile:hover, #smoothie-tile:hover { box-shadow: 0 1px 5px 1px #cccccc; } #main-tile { background: url(https://via.placeholder.com/360x250) no-repeat; background-position: center; } #dessert-tile { background: url(https://via.placeholder.com/360x250) no-repeat; background-position: center; } #smoothie-tile { background: url(https://via.placeholder.com/360x250) no-repeat; background-position: center; } #main-tile span, #dessert-tile span, #smoothie-tile span { position: absolute; bottom: 0; right: 0; width: 100%; text-align: center; font-size: 1.2em; text-transform: uppercase; background-color: #6a6a6a; color: #fff; opacity: .8; } /* END HOME PAGE */ /*************** MEDIA QUERIES ***************/ /** LARGE DEVICE **/ @media (min-width:1200px) { .jumbotron { background: url(https://via.placeholder.com/1200X675) no-repeat; height: 675px; } } /** MEDIUM DEVICE **/ @media (min-width:992px) and (max-width: 1199px) { .jumbotron { background: url(https://via.placeholder.com/992x558) no-repeat; height: 558px; } } /** SMALL DEVICE **/ @media (min-width: 768px) and (max-width: 991px) { .jumbotron { background: url(https://via.placeholder.com/768x432) no-repeat; height: 432px; } } /** EXTRA SMALL DEVICES **/ @media (min-width:767px) and (max-width: 576px){ .jumbotron { background: url(https://via.placeholder.com/768x432) no-repeat; height: 432px; } #main-tile, #dessert-tile, #smoothie-tile{ width: 360px; margin: 0 auto 15px; } } /** SUPER EXTRA SMALL DEVICES **/ @media (max-width: 479px) { #main-tile, #dessert-tile, #smoothie-tile { width: 280px; margin: 0 auto 15px; } }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-witdth, initial-scale=1"> <title>Food Blog</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!-- HEADER --> <header> <nav id="header-nav" class="navbar navbar-light navbar-expand-lg"> <div class="navbar-header"> <a href="index.html" class="float-left d-none d-md-block"> <div id="logo-img" alt="Logo image"></div> </a> <div class="navbar-brand"> <a href="index.html"><h1>Brand Name</h1></a> </div> </div> <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul id="nav-list" class="navbar-nav ml-auto text-center"> <li class="nav-item"> <a class="nav-link" href="#">Main</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Dessert</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Smoothie</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> </header> <!-- MAIN CONTENT --> <div id="main-content" class="container mx-auto"> <!-- JUMBOTRON --> <div class="jumbotron text-center"> <!-- FEATURED RECIPE --> <img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none"> </div> <!-- TILES BELOW THE JUMBOTRON --> <div id="home-tiles" class="row text-center"> <div class="col-md-4 col-sm-6 col-xs-12"> <a href="menu-categories.html"><div id="main-tile"><span>Mains</span></div></a> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <a href="menu-categories.html"><div id="dessert-tile"><span>Deserts</span></div></a> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <a href="menu-categories.html"><div id="smoothie-tile"><span>Smoothies</span></div></a> </div> </div> </div> <!-- END OF MAIN CONTENT --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
我正在尝试将某种样式规则应用于媒体查询中的三个#id选择器，但是似乎不起作用。但是，如果我在查询之外执行相同的操作，则可以正常工作（但是很不幸，...
我认为您代码中的这一行是问题所在：