Fixed div with padding increase width - html

Question

I have a simple template where I show header, content and footer section in the centre, Header has background color and all the contents should have 30px padding on left & right.
I dint it following way but it increases the width.
http://codepen.io/anon/pen/xZapEE?editors=1100
html, body, form {
height: 100%;
background-color: #fff;
height:100%;
}
body {
font-family: "Open Sans","Trebuchet MS",Verdana,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 13px;
line-height: 18px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
color: #687074;
height:100%;
background-color: #fff;
}
.main-wrapper{
width:1000px;
margin:0 auto;
position:relative;
height:100% !important;
padding:0 30px;
}
.header-wrapper{
width:100%;
min-height:200px;
background-color:#f5f5f5;
margin:0 auto;
position:relative;
padding:0 30px;
}
.content-main{
width:1000px;
min-height:400px;
margin:0 auto;
position:relative;
height:auto;
background-color:#ccc;
}
.footer-wrapper{
width:1000px;
min-height:200px;
background-color:#f5f5f5;
margin:0 auto;
position:relative;
}
.header-row1{
float:left;
width:100%;
height:150px;
margin-bottom:15px;
}
.header-col1
{
float:left;
width:132px;
width:50%;
}
.header-col2
{
float:right;
width:50%;
}
.header-col2 > h1{
font-size:60px;
text-align:right;
}
.header-logo{
}
.header-row2{
float:left;
width:100%;
height:30px;
margin-bottom:15px;
padding:0 30px;
}

Answer 1

You can use box-sizing to fit it in:
box-sizing: border-box;
Box-sizing values:
content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box: The width and height properties include the padding and border, but not the margin.