Wordpress Divi Custom CSS on HTML Form - css

Question

I have a wordpress site and I am customising it with the Divi theme. I have added an HTML form to a 'Code' module and it works great. However I cannot work out where I should put the CSS. I have tried to 'Custom CSS' areas of both the row and module itself. Perhaps there is something wrong in the code? I have pasted it below. Thanks!
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
}
<font face="helvetica"
<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" target='_parent'>
<input type=hidden name="oid" value="00D0Y0000034cvq">
<input type=hidden name="retURL" value="https://globalstudyuk.com/success-qatar">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="kasper.martlev#weare4c.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
<label for="last_name">Last Name</label> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br>
Date of Birth: <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYYY" /></span><br><br>
<label for="mobile">Mobile</label> <input id="mobile" maxlength="40" name="mobile" size="20" type="number" pattern="\d*" required=true/><br><br>
<label for="email">Email</label> <input id="email" pattern="[^ #]*#[^ #]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br>
Current/Previous School/University: <input id="00N0Y00000RWiNZ" maxlength="100" name="00N0Y00000RWiNZ" size="20" type="text" required=true /><br><br>
Course you would like to study: <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" required=true /><br><br>
<label for="lead_source">Where did you hear about us?</label> <select id="lead_source" name="lead_source"><option value="">--None--</option>
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Google">Google</option>
<option value="British Council">British Council</option>
<option value="Career day">Career day</option>
<option value="Deferred">Deferred</option>
<option value="Flier / Poster">Flier or Poster</option>
<option value="GSUK Alumni">GSUK Alumni</option>
<option value="GSUK_Website">GSUK_Website</option>
<option value="Other_(Please specify)">Other</option>
<option value="Referral_(Please specify)">Referral</option>
<option value="School Counsellor_(Please specify)">School Counsellor</option>
<option value="School Presentation">School Presentation</option>
<option value="School Tour">School Tour</option>
<option value="University Website_(Please specify)">University Website</option>
<option value="Web">Web</option>
</select><br><br>
<input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
<input type=hidden id="country_code" name="country_code"value="QA" />
<input type=hidden id="city" name="city" value="Doha" />
<center><input type="submit" name="submit"></center>
</form>

Answer 1

login to your dashboard -> click on Appearance -> click Customize -> click on Additional CSS and paste your css in that.

Answer 2

We resolved the issue by removing
div {
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
}
Although this would work fine on most pages, it was causing white boxes to appear in strange places, presumably due to the CMS we were using building pages in columns.