Форум Flasher.ru - Проблема с padding: 20px;

Добрый день!

Есть такая проблема с 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-->