I am trying to have a header div inherit its width from its parent. The header div is
margin-left: 17% !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
The problem stems from using a percentage value on the parent
width. Browsers seem to have a problem with this. (Tested on Chrome, FF & IE11.)
If you use pixel values the problem goes away.
From another answer:
It seems as though the static value (250px) can be propagated through normal inheritance. Whereas when the relative value (90%) is being used, the fixed div has already been taken out-of-flow, and now inheritance-wise, it's parent is the viewport.
Learn more here: