CSS design not affecting the input boxes with div and class

I am trying to make a google web application with input and select elements. I want to align both [input] and [select] elements with same margin and padding. I tried with below written code on my google web application but can’t happen. but if i go with [form input] in CSS then it happens but not with [div] and [class].

<style>
  .heading {
    font-family: "Times New Roman", Times, serif;
    text-align:center;
    font-weight: bold;
    color: black;
    font-size: 180%;
    padding: 20px 20px 15px 20px;
    background-color: #76ff03;
  }

  label {
    font-size: 30px;
  }

  select {
    height: 45px;
    width: 340px;
    font-size: 20px;
    font-family: Arial;
    border-radius: 15px;
  }
  /* input[type=number] {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    margin-left: 200px;
    padding: 30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
   } */

   
  .inputfield {
    height: 40px;
    width: 150px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    margin-left: 200px;
    padding: 30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
  }
  
  .Row {
    margin-left: 200px;
    padding: 30px;
  }

  ::placeholder {
    color: Black;
  }
    
</style>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base target="_top">
  </head>
  <body>
    <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
    <form action="submitscript.php" target="dummyframe">

      <div class="heading">
        <label>Sample Monitoring Sheet</label>
      </div>
  
      <div class="Row">
        <select id="Category">
          <option>Hardware</option> 
          <option>Software</option>
          <option>Accessories</option>   
        </select>
      

        <select id="subcategory">
          <option>Processor</option> 
          <option>RAM</option>
          <option>ROM</option>   
        </select>
        

        <select id="shift">
          <option>Hard disk</option> 
          <option>Key board</option>
          <option>Mouse</option>
        </select>
      </div>

    

   
      <div class="row">
        <input id="plan" type="number" class="validate" placeholder="MPlan">
      </div>
         

      
      <div class="row inputfield">
        <input id="per" type="number" class="validate" placeholder="Permanent">
        <input id="tra" type="number" class="validate" placeholder="Trainee">
        <input id="adi" type="number" class="validate" placeholder="Adiraj">
      </div>
     
    

   
      <div class="row inputfield">
        <input id="cad" type="number" class="validate" placeholder="Cadmaxx">  
        <input id="lay" type="number" class="validate" placeholder="Layam">
        <input id="mau" type="number" class="validate" placeholder="Mauli">
      </div>
    

   
      <div class="row">
        <input type="submit" id="btn" value="Submit">
      </div>
    
    </form>  
      
  </body>
</html>