media rules not working for diffrent window size?

Question

here in html & css i am trying to create a responsive navbar This is my html code:

           
             <a href="" class="active">Contact</a> 
            <a href="">About me</a>
            <a href="" >Gallery</a>
            <a href="" >Services</a>
            <a href="#">Home</a>
    </div>

here is my css code:

    margin: 0px;
    padding: 0px;
}
body{
    background-color: rgb(255, 255, 255);
}
.n {
    /*bosx-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
       overflow: hidden;
      background-color: rgb(31, 31, 31);
       height: 60px;
   }
   .n a{
       float: right;
      margin-top: 7px;
      border-width: 2px;
       text-align: center;
       list-style-type: none;
       padding: 10px 18px;
       align-items: center;
       font-weight: bolder;
       font-size:  20px;
       color: white;
       
       text-decoration: none;
        font-family: 'Josefin Sans', sans-serif; 
       
   }

   .n a:hover {
   color: #ff005d;
    border-bottom: 3px solid #ff005d;
    transition: 0.3s ;
} 
@media screen and (max-width:400px){
    body{
   background-color: black;
    }
}

But in css when i sm trying to use media query ,the query is not working after changing the window size. if anybody knows the solution for this please help me out

Answer 1

Your media rule is working correctly, you just have to make your windows size smaller than 400px (example with max : 900px) :

body{
  background-color: white;
}

@media screen and (max-width:900px){
  body{
    background-color: black;
  }
}