CSS Form, Textarea Out of Bounds

[PCHomepage]

I have several rather simple forms that I've styled easily but those with textareas, they are showing out of bounds of the form and go right behind the submit buttons. With the form's background temporarily in black so that I can see where the browser "thinks" the boundaries of the form are, attached is a screen capture showing the text area to the bottom of the image. If I make it tiny, say 200px wide and 50px high, it fits but it needs to be larger to be of any use.

This isn't yet online anywhere and the entire style sheet is too long to post here but the only styles specifically for the forms are:

form {
	position: relative;
	width: 100%;
	z-index: 5;
}

legend {
	color: #fff;
	background: #ffa20c;
	border: 1px solid #781351;
	padding: 2px 6px;
	font-weight: bold;
} 

textarea:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

input:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

label {
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-top: 1px solid #7B6D6B;
	border-left: 1px solid #7B6D6B;
	background-color: #948684;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold;
	float: left;
	text-align: right;
	text-justify: none;
	vertical-align: middle;
	margin-right: 5px;
	padding-right: 10px;
	display: block;
	height: 20px;
	width: 150px;
}

form-submit-button {
	position: relative;
	height: 25px;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
	background-color: #EAEAEA;
	font-size: 13px;
	font-family: inherit;
	color: #000000; 
	font-weight: bold;	

	padding-top: 20px;
	text-align: center;
	} 

input, textarea, select, button {
	width : auto;
	margin: 0;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

textarea {
	display : block;
	padding : 10px;
	margin  : 10px 0 0 -10px;
	width   : 600px;
	height  : 200px;
	overflow: auto;
}

 

[PCHomepage]

I found what was missing: the fieldset needed display: inline-block;. It still needs some tweaks and simplification as it got overly-complicated in trying to locate the problem but here is what I have now that works reasonably well:

fieldset {
	position: relative;
	display: inline-block;
	margin: 0 15px;
	z-index: 5;
}

fieldset p {
	height: 10px;
	margin-bottom: 2px;
}

legend {
	color: #fff;
	background: #ffa20c;
	border: 1px solid #781351;
	padding: 2px 6px;
	font-weight: bold;
} 

textarea:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

input:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

label {
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-top: 1px solid #7B6D6B;
	border-left: 1px solid #7B6D6B;
	background-color: #948684;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold;
	float: left;
	text-align: right;
	text-justify: none;
	vertical-align: middle;
	margin-right: 5px;
	padding-right: 10px;
	display: block;
	height: 20px;
	width: 150px;
}

/*
.FooterTD {
	padding-top: 20px;
	position: relative;
	text-align: center;
}
*/

input, textarea, select, button {
	position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

input[type='submit'] {
	position: relative;
	text-align: center;
    display: inline-block;
    width: auto;
	height: 25px;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
	background-color: #EAEAEA;
	font-size: 13px;
	font-family: inherit;
	color: #FFFFFF; 
	font-weight: bold;	
	padding-top: 20px;
} 

input[type='textarea'] {
	position: relative;
	padding : 10px;
	margin  : 20px 0 0 20px;
	width   : 80%;
	height  : 200px;
	overflow: auto;
}