Как правильно использовать media queries ?

.navigation { 
 
    float: right; 
    border: solid; 
    color: brown; 
    min-width: 70%; 
    max-width: 70%; 
    padding: 2px; 
} 
 
.nav{ 
 
    float: right; 
    border: solid; 
    color: blueviolet; 
    min-width: 98%; 
    min-height: 75px; 
    max-height: 75px; 
    max-width: 98%; 
}

  <div class="container"> 
 
        <div class="navigation"> 
 
            <div class="nav"> 
 
                <ul class="list"> 
 
                    <li id = "home">Home</li> 
                    <li id = "login">Login</li> 
                    <li id = "register">Register</li> 
                    <li id = "contact-us">Contact Us</li> 
                    <li id = "about-us">About Us</li> 
                    <li id = "our-location">Our Location</li> 
 
                </ul> 
 
            </div> 
 
        </div> 
 
        <div class="logo"> 
 
            <h5>CouponSystem</h5> 
 
            <h6>Choose the service you like! </h6> 
        </div> 
 
 
    </div> 
 
 
@media (max-width: 900px){ 
 
 
    .logo { 
         
        min-width: 100%; 
        max-width: 100%; 
    } 
     
}