html - Wordpress 的表单问题

Question

我是代码初学者，无法弄清楚为什么我的表单看起来这么长。 http://mycolorshop.com/mycolorshop-inc/contactus

我以为是边距，所以我增加了它。我以为是宽度，所以我把它们设为 50%。都没有用。有人可以告诉我我需要更改什么吗？

代码如下:

/* Custom Widget - Contact Form */
.wpcf7-form p { 
    margin-bottom: 50px; 
}
.wpcf7-form input {
    width: 50%;
}
.wpcf7-form input[type="submit"] {
    width: inherit;
    padding: 50px 30px;
}
.wpcf7-form textarea {
    height: 94px;
    min-height: 68px;
}
.wpcf7-form .wpcf7-response-output {
    margin-left: 20;
    margin-right: 20;
}
.wpcf7-form .wpcf7-not-valid-tip {
    width: 50%;
    left: 0;
    top: -60px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#footer .wpcf7-form input,
#footer .wpcf7-form textarea {
    color: #B53D85;
    border: 1px solid #444;
    background: #B53D85;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
#footer .wpcf7-form input[type=submit] {
    text-transform: capitalize;
    border: 20px solid #111;
    background: #B53D85;
}

Answer 1

form {
    width: 50%;
    margin: 0 auto;
    background: #000;
    padding: 20px;
}