Form not working as it should - html

Question

Question:
1. Why is the "required" function not working in my contact form?
2. Why can I not make use of the full width of the input-field. See img.
I can only write on the left half of the input field.
HTML:
<div id="content">
<div class="contact">
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</div>
</div>
CSS:
#content
{
max-width: 50.694%;
position: absolute;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
border-radius: 13px;
width: 730px;
margin: 0 0 6.6% 25.9167%;
box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);
}
.contact{
width: 100%;
margin: 10px;
}
fieldset{
border: 0;
margin: 0;
width: 100%;
padding: 1%;
}
.name, .email, .message{
padding-right: 29px;
}
label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;
}
input{
margin-right: 70px;
padding: 6px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);
}
#name, #email, #phone, #message{
padding-right: 50%;
float: right;
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 23%;
}
div#inner-editor{
padding: 30px;
}
#message{
padding-top: 10%;
}
.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199,
255, 100, 0.73);
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #d8d9de;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #d8d9de;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #d8d9de;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #d8d9de;
}

Answer 1

You are missing your form tag. It works for me once I add your form tag in:
<div id="content">
<div class="contact">
<form>
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</form>
</div>
</div>
http://jsfiddle.net/GEs34/

Answer 2

Here is the fiddle where your second issue has been resolved.
Just removed the padding-right from the name, email, phone and message id input fields and increased their width percentage.