当尺寸较小时从标题中删除填充

Question

我让网站从导航栏固定顶部开始，然后滑块有 h1 和 p 标签没有图像，所以我给幻灯片类命名为 .item 并给这个类 padding:400px 0;给我一个漂亮的大标题，我正在为整个大屏幕滑块使用背景图像属性一切正常，但在较小的屏幕上，我在 h1 和导航栏之间也有很大的空间，在 h1 和轮播指示器之间也有很大的空间。搜索并尝试删除 @media(max-width:750px) 和 @media(max-width:480px) 上的填充和边距，但它不起作用所以我怎么能丢失这个填充？

@media (max-width:750px){
    
    #slider .container #mycarousel .carousel-inner .item{
        padding:0;
        margin:0;
    }
    
}

@media (max-width: 480px){
    #slider .container #mycarousel .carousel-inner .item{
        padding:0;
        margin:0;
        
    }
    
    
    
}

/* Slider */
#slide{
    
    background-image: url(../img/header.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
}
.item{
    
    color:#fff;
    padding:400px 0;
}

 <section id="slide" class="text-center">
       <div class="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>
                   <li data-target="#mycarousel" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner">
                   <div class="item active">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Only The Stylish Shape</p>
                       <button type="button" class="btn btn-success">I Smell Success</button>
                       
                   </div>
                   <div class="item">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Stylish</p>
                       <button type="button" class="btn btn-success">Take Me There</button>
                       
                   </div>
                   <div class="item">
                       
                       <h1>Let's Make Business Look Better</h1>
                       <p>And The Shape Of Work Is Stylish</p>
                       <button type="button" class="btn btn-success">Let's Do It</button>
                       
                   </div>
                   
                   
                   
               </div>
               
               
           </div>
           
           
       </div>
       
       
       
   </section>

Answer 1

你有一个错字，应该是#slide 而不是#slider，因此.item 元素永远不会被定位。

@media (max-width:750px) {
    // this should be #slide, not #slider
    #slide .container #mycarousel .carousel-inner .item {
        padding:0;
        margin:0;
    }
}

@media (max-width: 480px) {
    // this should be #slide, not #slider
    #slide .container #mycarousel .carousel-inner .item {
        padding:0;
        margin:0;    
    }
}

希望这会有所帮助。