Проблема с padding: 20px;

[Acxat]

Добрый день!

Есть такая проблема с HTML. когда я в CSS ввожу padding: 20px;
у меня на странице расширяется блок(div)
Помогите пожалуйста!
Заранее спасибо...

CSS:

*{
	padding: 0px;
	margin: 0px;
	border: 0px;
}

html,body {
	height: 100%;
	width: 100%;
	background-color: #85b2d3;
	background-image: url("images/body_bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#container{
	width: 950px;
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
}

#footer{
	width: 950px;
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
}

.grid1{
	width: 650px;
	background-color: #ebebeb;
	float: left;
	padding: 10px;                 <--- /*ВОТ ОН padding*/
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 0px;
	margin-left: 5px;

	-moz-border-radius: 10px;
}

.grid2{
	width: 280px;
	background-color: #555;
	float:right;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 5px;
	margin-left: 0px;
	
	-moz-border-radius: 10px;
}

.grid3{
	width: 940px;
	background: #ebebeb;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	
	-moz-border-radius: 10px;
}


.top, .bottom{display:block; background-color: #85b2d3}
.top *, .bottom *{display: block; height: 1px; overflow: hidden; background-color: #FFFFFF}

.innerTop, .innerBottom{display:block; background-color: #FFFFFF}
.innerTop *, .innerBottom*{display: block; height: 1px; overflow: hidden; background-color: #e5e5e5}

.r1{margin: 0 5px;}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

HTML:

<div id="container" class="clearfix"> <!--Container start-->
	<b class="top"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <!-- Oval Corner Top-->

		<div class="grid1" class="clearfix"> <!--Grid 1 start-->
			<h4> Essence </h4>
			<p> The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions,
				based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in
				tandem. Read more. </p>
		</div> <!--Grid 1 end-->
			
		<div class="grid2" class="clearfix"> <!--Grid 2 start-->
			<h4> Dimensions </h4>
			<p> The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel
			increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between
			columns. View demo. </p>
		</div> <!--Grid 2 end-->
		
</div> <!--Container end-->

<div id="footer" class="clearfix"> <!--Footer start-->
	
	<div class="grid3"> <!--Grid 2 start-->
		<h4> Purpose </h4>
		<p> The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated
		into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical
		measurements. </p>
	</div> <!--Grid 2 end-->
		
	<b class="bottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> <!-- Oval Corner Bottom-->
</div> <!--Footer end-->

[studmar]

Реальная ширина блока складывается из width + padding. Следовательно вам нужно уменьшить width нужного блока в css на "размер" padding, в данном случае на 10px(справа) и 10px(слева) итого 20px