The media property is not working for responsive code

Question

I have created a contact form and it has specific properties for desktop mode. In desktop mode the width of the div needs to be 60% and on mobile I need it 99% but the @media wont work. .

              <div class="content-parent">
              <div class="container1">
                <form action="/action_page.php">
                  <label for="fname">First Name</label>
                  <input type="text" id="fname" name="firstname" 
                  placeholder="David">

                  <label for="lname">Last Name</label>
                  <input type="text" id="lname" name="lastname" 
                   placeholder="Jones">

                  <label for="country">Category</label>
                  <select id="country" name="country">
                    <option value="australia">Support Department</option>
                    <option value="canada">Sales Department</option>
                    <option value="usa">Billing Department</option>
                  </select>

                  <label for="subject">Messge</label>
                  <textarea id="subject" name="message" placeholder="Begin 
                  your message here" style="height:200px"></textarea>

                  <input type="submit" value="Submit">
                </form>
              </div>
            </div>

     ```@media only screen and (max-width: 600px) {
        .container1 {
         width: 100%;
          }
          }





        .container1 {
         border-radius: 5px;
         background-color: #f2f2f2;
         padding: 20px;
         width: 60%;
         display: inline-block;
          }

Answer 1

add like this after your style

css

.container1 {
 border-radius: 5px;
 background-color: #f2f2f2;
 padding: 20px;
 width: 60%;
 display: inline-block;
  }
@media only screen and (max-width: 767px) {
        .container1 {
         width: 100%;
         }
       }