Hello,

I've been having trouble adding a style sheet to my homepage. The homepage index.php pulls the style from the SMF forums and something in my css code is causing it break out of the intended box.


I have a header.php that pulls in the top of my smf code with.

Code:
<?php
error_reporting(E_ALL);
$ssi_theme = 3;
$ssi_layers = array('html', 'body');
$ssi_gzip = true;
require('SSI.php');
?>
Then I have footer.php

Code:
<?php
ssi_shutdown();
?>
Then I have my index.php file on the root of my site.

Code:
<?php 
//Require header.php
require('forum/header.php'); 
?>

This is where all of my content is going and I'm trying to apply css to it.

<?php 
//Require Footer,php
require('forum/footer.php'); 
?>
My content should be pushing the Grey background down and sitting on top of it in the center of the page. Something in my css is causing it not to work as intended. When i don't use my style sheet it works fine. Just without my content being styled. Currently I have the css in the header to try to get it working. I'll add it to the forum style sheet once i have it in line. That will clear up the validation erros.

Here is my page with my css applied.
Code:
http://www.wararmada.com
Here is my page without my css.
Code:
http://www.wararmada.com/test2.php
Here is my css I'm trying to apply to the contact on my home page.

Code:
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:link {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: none;
	color: #CCCCCC;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}
.holder {
	width: 890px;
	margin: 0 auto;
}
.footerbox {
	width: 890px;
	float: left;
	background-color: #000000;
	margin-top: 25px;
}
.inner_container {
	width: 890px;
	margin: 0 auto;
}
.header {
	width: 890px;
	height: 0px;
}
.left_holder {
	width: 200px;
	float: left;
	padding-top: 15px;
}
.right_holder {
	width: 200px;
	padding-top: 15px;
	float: right;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height: 17px;
	color: #999999;
	vertical-align: top;
}

.text_mainstory {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height: 17px;
	color: #999999;
	text-align: left;
	vertical-align: top;
	width: 350px;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	font-weight: lighter;
}
.text_bpc {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 16px;
	color: #999999;
	text-align: left;
	vertical-align: top;
	width: 396px;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	font-weight: lighter;
}
a.link:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 42px;
	color: #CCCCCC;
	text-align: left;
	vertical-align: top;
	font-weight: lighter;
	text-decoration: none;
}
a.link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 42px;
	color: #CC0000;
	text-align: left;
	vertical-align: top;
	font-weight: lighter;
	text-decoration: none;
}
.image_mainstory {
	width: 110px;
	padding-left:10px;
	float: left;
	text-decoration: none;
	padding-top: 25px;
}
.image_bpc {
	width: 64px;
	padding-left:10px;
	float: left;
	padding-top: 25px;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #333333;
	margin-bottom: 11px;
	padding-bottom: 10px;
	padding-top: 0px;
	margin-top: 0px;
	text-transform: uppercase;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #CCCCCC;
	margin-bottom: 0px;
	padding-top: 0px;
	margin-top: 0px;
	text-transform: uppercase;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #333333;
	margin-bottom: 11px;
	padding-bottom: 10px;
	padding-top: 0px;
	margin-top: 0px;
	text-transform: uppercase;
}
.news_horizontal_holder {
	width: 490px;
	float: left;
	padding: 0 0 15px 0;
}
.news_horizontal_holder_notonindex {
	width: 490px;
	float: left;
}
.welcome_holder {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #999999;
	text-align: left;
	vertical-align: top;
	width: 470px;
	padding-bottom: 30px;
	border-bottom:1px dotted #333333;
	margin:15px 10px 10px 10px;
}
.corporations_holder {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 16px;
	color: #DADADA;
	text-align: left;
	vertical-align: top;
	width: 180px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	text-transform: uppercase;
}
.footer_inside {
	width:490px;
	margin-left:200px;
	margin-right:200px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #0A0A0A;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #050505;
	float: left;
}
/*TEXT STYLES*/


.story_general {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height: 20px;
	color: #CCCCCC;

}
.text_10pxdarkgrey {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height: 20px;
	color: #D6BD5C;
}
.text_recruitingcorps {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	line-height: 16px;
	color: #CC0000;
	text-align: left;
	vertical-align: top;
}
.text_recruitingcorpsalert {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	line-height: 16px;
	color: #D6BD5C;
	text-align: left;
	vertical-align: top;
}

Do you have any idea what would be causing it to break out of the page?

Thanks!