Bottom of Pop Up Form is not fully showing the back ground color

I have been struggling to get the CSS to do what I would like to see in the pop up (which displays a form ) that I am using but the bottom of the pop up form is still not showing all the white background.

The CSS is below with the form that sits inside the pop up. What am I doing wrong and how do I correct this annoyance?

    
    <style>
      * {
        box-sizing: border-box;
    
      }
      .openBtn {
        display: flex;
        justify-content: left;
      }
      .openButton {
        border: none;
        border-radius: 5px;
        background-color: #1c87c9;
        color: white;
        padding: 14px 20px;
        cursor: pointer;
        position: fixed;
      }
      .loginPopup {
        position: relative;
        text-align: center;
        width: 100%;
      }
      .formPopup {
        display: none;
         max-height: 340px;
        position: absolute;
        left: 45%;
        top: 5%;
        transform: translate(-50%, 10%);
        border: 3px solid #999999;
        z-index: 9;
        opacity: 1.0;
      }
      .formContainer {
         max-width: 1600px;
         max-height: 350px;
        padding: 20px;
        background-color: white;
        
      }
   
      .formContainer .btn {
        padding: 12px 20px;
        border: none;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        width: 30%;
  
        opacity: 1.0;
      }
      .formContainer .cancel {
        background-color: #cc0000;
      }
      .formContainer .btn:hover,
      .openButton:hover {
        opacity: 1;
      }
      
      .boxed {
  border: 1px solid green ;
}
    </style>
        
        
        
        

 
   
        
      <div class="formPopup" id="popupColumnDefinitionForm">
        <form class="formContainer">

          <label for="definecolumns">
            <strong>Please define section map by columns:</strong>
          </label>
            <br><br>
           <label for="columns"  style="font-size: 15px;">Column Number:</label>
            <input type="number" id="column" name="column_number" style="width: 3em; height:18px;" >
            <br><br>
            
           <label for="numberofcolumn" style="font-size: 15px;">Number of plots:</label>
            <input type="number" id="plots" name="number_of_plots" style="width: 3em; " >
            
           <label for="order" style="font-size: 15px;">Order by:</label>
            <select id="order" name="columnorder">
              <option value="top_to_bottom" selected>Top to bottom </option>
              <option value="bottom_to_top"  >Bottom to top </option>   
            </select>
           
           <label for="order" style="font-size: 15px;">Number from:</label>
            <select id="columnnumbering" name="columnnumberorder">
              <option value="left_to_right" selected>Left to right </option>
              <option value="right_to_left"  >Right to Left </option>   
            </select>
            
            
           <label for="columnStart" style="font-size: 15px;">Start with Plot:</label>
            <input type="text" id="startplot" name="startwithplot"  style="width: 7em; font-size: 15px; ">
          
          <br>  
          
          <label for="definecolumns">
            <strong>Defined Section Map by Columns:</strong>
          </label>
          <br>
          <textarea name="definedsectioncolumns" disabled id="CurrentTextArea" cols="50" rows="5" style="overflow:auto;resize:none" >""</textarea>
          <br>
          <br>
          <button type="button" class="btn" onclick="AddColumnDefinitionForm()">Add another column</button>

          <button type="button" class="btn" onclick="DoneColumnDefinitionForm(this)">Done</button>  
        
          <button type="button" class="btn cancel" onclick="CloseColumnDefinitionForm()">Cancel</button>
        

        </form>

      </div>

from Recent Questions - Stack Overflow https://ift.tt/3p3URIp
https://ift.tt/eA8V8J