固定格与填充增加宽度

我有一个简单的模板，其中我在中心显示标题，内容和页脚部分，标题有背景颜色，所有内容左侧&右边应该有30px填充。固定格与填充增加宽度

我按照下面的方式使用它，但它增加了宽度。

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; 

}

来源

2016-02-04 Learning

尝试移除'宽度：100％;''从.header-wrapper' – Cobote

您可以使用box-sizing，以适应它：

box-sizing: border-box;

箱尺寸值：

内容盒：这是初始和默认值为由CSS标准指定。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。

边框：宽度和高度属性包括填充和边框，但不包括边距。

来源

2016-02-04 08:42:33

Mozilla的支持另外的填充盒值，这将导致尺寸要被施加到所述衬垫和内容，而不是边框。 –

固定格与填充增加宽度

回答

相关问题