CSS - background extending to top of page?, Help! New to CSS design. Options

[5arah1askey]

I recently added the web-to-lead form from Salesforce onto our Wordpress website. I created a new CSS style to try to make a white background for the form, and I wanted it to contain the form and have a margin between the 3 blocks above the form. However, I cannot figure out why my white background for the form is extending all the way up the page behind my other elements. HELP?

You can view the page in question here: https://www.richlandpestbee.com/about-us-pe...e-control/team/

CSS

CODE

/*webform================*/

.webform {
      background-color: white;
    max-width: 600px;
    text-align: center    
    width: 100%;
    border: 1px solid white;
    padding: 20px;
    margin-top: 40px;
}

HTML

CODE

<center><div class="webform">
<center>
<span class= h2>GET A FREE QUOTE!</span><br>
<span class= h4>Call 1-800-308-9126</span>
</center><br>

<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name='captcha_settings' value='{"keyname":"rpb002","fallback":"true","orgId":"00Da0000001aKp9","ts":""}'>
<input type=hidden name="oid" value="00Da0000001aKp9">
<input type=hidden name="retURL" value="https://www.richlandpestbee.com/thank-you/">

<div class="webtable">
<table max-width="600" border="0" cellpadding="0">
    <col style="width:20%">
    <col style="width:50%">
    <tbody><span class= h5>
            <tr>
                <td><label for="first_name">First Name</label></td>
                <td><input  id="first_name" maxlength="40" name="first_name" size="40" type="text" /></td>
            </tr>
            <tr>
                <td><label for="last_name">
                    Last Name</label></td>
                <td><input  id="last_name" maxlength="80" name="last_name" size="40" type="text" /></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input  id="email" maxlength="80" name="email" size="40" type="text" /></td>
            </tr>
            <tr>
                <td><label for="phone">Phone</label></td>
                <td><input  id="phone" maxlength="40" name="phone" size="40" type="text" /></td>
            </tr>
            <tr>
                <td><label for="street">Street Address</label></td>
                <td><input  id="street" maxlength="40" name="street" size="40" type="text" /></td>
            </tr>
            <tr>
                <td><label for="city">City</label></td>
                <td><input  id="city" maxlength="40" name="city" size="40" type="text" /></td>
            </tr>
            <tr>
                <td><label for="state">State</label></td>
                <td><input  id="state" maxlength="10" name="state" size="40" type="text" /></td>
            </tr>
        <tr>
            <td><label for="description">Description</label></td><td><textarea name="description"></textarea></td>
            <td><input id="lead_source" name="lead_source" type="hidden" value="Website Form" /></td>
        </tr>
        </span></tbody>
    </table></div>
<p>Please describe the size, height and location or any wasp or hornet nest. <br>
For any other services, please be as detailed as possible in your description of the issue for a more streamlined estimate process.</p>
<center><div class="g-recaptcha" data-sitekey="6LcXqqgZAAAAAPUGTzQP7Y0BwS6Q-V75jO1n7J3s"></div></center><br>
<input type="submit" name="submit">

    </form>
</div></center>

This post has been edited by 5arah1askey: Sep 1 2020, 09:50 AM

[pandy]

I'm looking, but haven't figured it out yet. For some reason the CENTER block that you have at the top of .webform is very high and very empty apart from those two SPANs at the bottom of it. I don't find any CSS associated with either the CENTER or those SPANs that could explain this. I'll look again...

FYI CENTER was deprecated ages ago. You shouldn't use it. But that you do isn't the cause of this problem.

BTW, nice dogs and cute bugs. I like the look of the page.

[pandy]

Well, you have bundle a of CSS errors. Some of them serious.
https://jigsaw.w3.org/css-validator/validat...ng=&lang=en
All where it says parse error mean the style sheet won't be read after that point.

Try to fix the most serious ones. But I don't think that's the cause of your problem either, but rather the extensive absolute positioning. I had to validate to get to see all CSS in one place (at the bottom of the validation page). There are so many style sheets that it's hard to untangle. These WP templates aren't easy to follow with meaningless class and id names and so much of everything.