I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here:
I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn't work either. Can someone kindly point out what needs to be modified?
Below is the snippet of code in question:
/* 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;
}