サイズが小さいときにヘッダーからパディングを削除する

Question

navbarでサイトを開始して固定してから、スライダーにh1とpタグの画像がないので、スライドクラスに.itemという名前を付けて、このクラスのパディングを与えます：400px 0 ;私に大きな素敵なヘッダーを与えると私は大画面ですべてのスライダの背景画像プロパティを使用していますが、すべてうまく動作しますが、小さな画面では、h1とnavbarの間の大きなスペースをh1とカルーセルインジケータi'v @media（最大幅：750px）と@media（最大幅：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

あなたはタイプミスを持って.item要素が対象とされることはありません。このため、それは、#slideない#sliderでなければなりません。

@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;  
    } 
} 

これが役に立ちます。