有办法去掉从父级元素继承下来的 CSS 样式吗？

#page-content {position:static}
#headcontent {position:absolute;width:100%;height:xxxpx;}

@wincat 改html的吧，或者用jquery把你的子类在ready事件时移到body最后

用important覆盖样式，不要在html中插style属性，样式和HTML分离是良好习惯

“>”： 用他的爷爷级，把属性控制在父亲级，然后孙子级就不受影响了~
eg：
#name1 > div
只有name1下的直属div 受该属性影像。 div里如果再有div是不继承的。

!important； 覆盖掉所有的样式

/*
如果 #page-content 内部布局简单，可以试试。
*/

#page-content {
width: 100%;
}

#page-content > * {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}

#head-content {
width: 100%;
}

@media (min-width: 768px) {
#page-content > * { width: 750px; }
}

@media (min-width: 992px) {
#page-content > * { width: 970px; }
}

@media (min-width: 1200px) {
#page-content > * { width: 1170px; }
}

不好意思，@media 同学，@ 了你这么多遍！

@juicy 我觉得这并不属于继承的问题，盒模型的属性并不像字体风格一样来自父级，只能说是「适应」父级。

这是我简单写的demo
http://codepen.io/nailu0/pen/gbxqoy/
子元素想超过父元素宽度，最简单的方法是利用负margin值来实现
设定一个很大的margin:0 -100%;内部可以继续用container居中，col，row来布局，也可以自己灵活处理。

楼主你的问题并不是继承了样式的问题，而是100%的base的问题。这个要么去掉上层所有的position：relative（可能破坏bs的布局），要么更改你的html结构，要么用js处理

@loading 用 id 写 css 是不推荐的做法

可以利用 calc & vw

demo: http://codepen.io/anon/pen/PwKLwq

@0x142857 这个我知道的，感谢提醒。 ;-p

既然这样，你就不要用container装了嘛

@0x142857 为什么不推荐呢？如果的确不是类的语意，也不用id?

这个问题怎么还在讨论，晕，根据楼主描述，这根本不是CSS继承问题，也不是CSS优先级问题，很多人都搞错方向了，楼主说的明显是HTML结构问题。

目前我想到两个办法来解决：
第一个办法我在二楼已经说了，就是让这个div脱离文档流，就是用position:absolute或者position:fixed给div定位，这样div就可以相对于document来设置宽度了。

第二个办法就是改变页面的HTML结构，你的要求是.container里面的div大于.container 本身，明显你这个结构写的不好，一般都是面积大的元素包含面积小的元素，你可以考虑改一下结构，比如让div在.container外面。