媒体查询中的响应调查表

Question

所以我想知道如何使用媒体查询使#form div占据100％的视口以及500px的#titlesec分割。我当时正在考虑通过Flexbox或网格进行此操作，但不确定如何操作。 代码如下。

<div id="forms">
<form id="survey-form-1">
  <p id="name">Name: <input type="text" placeholder="Full Name"></p>
  <p id="number">Number: <input type="number"  placeholder="10 digits here""></p>
  <p id="email">Email: <input type="text" placeholder="put your email here"></p>
  <p id="email"  >Password: <input type="password" placeholder="password"></p>

</form>
    <br>
    <p>
         <label>How would you describe yourself?</label>
      <br>
         <select id= "myList">
           <option value = "student">Student</option>
           <option value = "child">Child</option>
           <option value = "parent">Parent</option>

         </select>
      </p>
      <br>
    <form id="survey-form-2">
    <p> Q: How satisfied are you with our product?</p>
    <br>
    <input type="radio" name="satisfaction" value="Very Satisfied" checked> Very Satisfied </input>
    <br>
    <input type="radio" name="satisfaction" value="Satisfied" > Satisfied </input>
    <br>
    <input type="radio" name="satisfaction" value="Kinda Satisfied"> Kinda Satisfied </input>
    <br>
    <input type="radio" name="satisfaction" value="Not Satisfied"> Not Satisfied </input>
    <br>
    <br>

    <p> Q: What do you like about our product?</p>
     <input type="checkbox" name="likes" value="likes" checked> The product is reliable </input>
    <br>
    <input type="checkbox" name="likes" value="Satisfied" > The the kids love it </input>
    <br>
    <input type="checkbox" name="likes" value="Kinda Satisfied"> The product is fun </input>
    <br>
    <input type="checkbox" name="likes" value="Not Satisfied">The product is long lasting </input>

    </form>
    </div>

这里是CSS，请检查一下媒体查询，因为它们是此例中代码中最重要的部分...

body {
background-color:#3385FF;  
}

#title-sec {
  display: flex;
  flex-direction: column;
  background-color: white;
  width:50%;
  height: 150px;
  position: relative;
  left: 25%;
  margin-top:-7px;
  margin-bottom: 10px;

}


h1 {
  text-align: center;
}

p {
  text-align: center;
}

#forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background: white;
  width: 50%;
  position: relative;
  left: 25%;
}
#survey-form-1 {
  text-align: center;
  padding-top: 20px;
}

#survey-form-2 {
  text-align:center;
}

input {
  text-align: center;
}


@media only screen and (max-width: 500px) {

  #title-sec {

  display: flex;
  flex-direction: column;
   align-items: stretch;
  background-color: white;
  width:-75%;
  height: 150px;
  padding-bottom: 20px;
  margin-bottom: 20px;
margin-right: 131.25;

width:75%;    
}

  #forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background-color: white;
  align-items: center; 
  width: 100%;  

  }
}