Pseudo Element 100% width is not taking container size - html

Question

I'm using a pseudo element (before) to put a border on top of a container inside a two column layout. I want the border on top of just one container.
Shouldn't the width of the pseudo element (being set to 100%) make it the width of the container it's inside?
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>

Answer 1

the problem is you are using position:absolute
From MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used
A fix is to add this to your CSS:
.articleWrapper {
position:relative;
}
and change top:0; in .articleWrapper:before to any negative value you like best.
here is a snippet
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper {
position:relative;
}
.articleWrapper:before {
content: "";
position: absolute;
top: -30%;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>