remove padding from header when size is smaller - html

Question

i'm making site start with navbar fixed-top then slider has h1 and p tags no images so i'm giving the slides class named .item and giving this class padding:400px 0; to give me big nice header and i'm using background-image property for the whole slider with large screen all works fine but on smaller screens i get big space between the h1 and the navbar also between h1 and the carousel-indicators i'v searched and tried to remove the padding and margin on #media(max-width:750px) and #media(max-width:480px) but it didn't work so how i can losse this padding ?
#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

You have a typo, it should be #slide not #slider, because of this the .item element is never targeted.
#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;
}
}
Hope this helps.