Background color extension due to Margin

[Dustin45309]

So I have three div's that look like this:

echo "<div='playerinfo'>";
......all information goes here
echo "</div>";
echo "<div='stats'>";
......all information goes here
echo "</div>";
echo "<div='weapons'>";
......all information goes here
echo "</div>";

in which are in cased in a:

echo"<div id='wrapper'>";

Whenever I try to margin-right the "playerinfo" div OR marign-left the "stats" div, the background color stretches to the end of the margin. My CSS for the two div's look like this:

body{background: #0D0D0D;}
h1{
	color: white;
	text-align: center;
}
div{
	background-color: #422100;
	color: white;
}
tab{
	float:right;
}
p{
	text-indent: 25px;
	text-align: justify;
	color: white;
}
#wrapper{
	height: 100%;
	width: 100%;
background-color: #0D0D0D;
}
#nav{
	position: relative;
	float: left;
	clear: left;
	display: block;
	width: 100%;
	height: 3.25%;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	border-color: white;
	background-color: #0D0D0D;
	margin-top: .5%;
}
#nav ul{
	text-align: center;
}
#nav ul li{
	display: inline;
	position: relative;
	border: thin solid white;
	border-radius: 5px;
	margin: -2px;
	padding: 5px;
	box-shadow: 1px 1px 1px;
	background-color: #422100;
}
h2,
h3,
#nav ul li a:link,
#logins a:link{color: white;}
#nav ul li a:visited,
#logins a:visited{color: white;}
#logins{
	float: right;
	border: thin solid white;
	border-radius: 5px;
	width: 20%;
	padding-left: 5px;
	text-align: center;
	box-shadow: 1px 1px 1px;
	margin: -6% 0 -5% 0;
}
#content{
	position: relative;
	float: left;
	display: block;
	border: thin solid white;
	width: 25%;
	padding: 0 15px 0 15px;
	border-radius: 5px;
	box-shadow: 5px 5px 5px;
	margin-top: 1%;
}
#content h1,#news h1,#legal h1,#playerinfo h1,#stats h1{
	border-bottom: thin solid black;
	box-shadow: 0 1px 0;
}
#banner{
	border: thin solid white;
	width: 100%;
	height: 73px;
	border-radius: 5px;
	box-shadow: 5px 5px 5px;
	color: white;
}
#news{
	position: relative;
	display: block;
	float: left;
	margin-left: 3%;
	border: thin solid white;
	padding: 0 15px 0 15px;
	width: 35%;
	border-radius: 5px;
	box-shadow: 5px 5px 5px;
	margin-top: 1%;
}
#legal{
	position: relative;
	float: left;
	border: thin solid white;
	border-radius: 5px;
	box-shadow: 5px 5px 5px;
	width: 25%;
	margin-left: 4%;
	margin-top: 1%;
	padding: 0 15px 0 15px;
}
form{
	border: thin solid white;
	width: 35%;
	padding: 0 5px 0 5px;
	margin-left: auto;
	margin-right: auto;
}
#playerinfo{
	float: left;
	border: thin solid white;
	width: 25%;
	border-radius: 5px;
	box-shadow: 5px 5px 5px;	
	padding: 0 15px 0 15px;
	margin-right: 5%;
	
}
#stats{
	float: left;
	margin-left: auto;
	margin-right: auto;
	width: 18%;
} 

I'm not understanding why the "margin-right: 5%;" in #playerinfo is stretching the div background color out all the way to the margin's ending point in which I DO NOT want. I just want the black background to show in between the two divs and not the brown (current color that will be changed soon). I would like to see the "stats" div centered also.

Edited December 31, 2013 by Dustin45309

[Dustin45309]

I have found out the problem. Thanks to all who have looked at it. I didn't have my width set for my other div yet so it didn't stop doing "width: 100%"