Hi Guys Got a submission form but the submit button is wider than the input/textarea. Any ideas? CSS form { max-width: 300px; float: left; margin: 40px 0; padding: 10px 20px; background: #34495e; } h3{ font-size: 20px; font-family: roboto; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0; padding: 10px; } input[type="email"], textarea, select { border: none; font-size: 16px; font-family: roboto; height: auto; margin: 0; outline: 0; padding: 10px; width: 100%; background: #fff; color: #000; } button { padding: 10px; color: #fff; background: #ed5565; font-size: 16px; font-family: roboto; text-align: center; font-weight: 700; width: 100%; border: none; margin: 0 0 20px 0; } fieldset { margin-bottom: 10px; border: none; } label { font-size: 18px; font-family: roboto; display: block; margin-bottom: 8px; color: #ff0; } HTML <form action="index.html" method="post"> <h3>Sign Up</h3> <fieldset> <label for="mail">Email:</label> <input type="email" id="mail" name="user_email"> </fieldset> <button type="submit">submit</button> </form> Thanks in advance
Try this : Code: h3 { color: rgb(255, 255, 255); font-family: roboto; font-size: 20px; font-weight: 700; margin: 0; padding: 10px 0; text-transform: uppercase; } fieldset { border: medium none; margin: 0; padding: 0; } button { background: rgb(237, 85, 101) none repeat scroll 0 0; border: medium none; color: rgb(255, 255, 255); font-family: roboto; font-size: 16px; font-weight: 700; margin: 10px 0 20px; padding: 10px; text-align: center; width: 100%; } Many browsers naturally add the following attributes to fieldsets so you need to zero them to override the browser defaults: Code: fieldset { display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em; padding-right: 0.75em; border: 2px groove (internal value); } Source : http://www.w3schools.com/tags/tag_fieldset.asp