CSS - prevent border from moving on scroll - html

Question

When the browser window is resized, the borders are shifting away from the content?
How can I achieve a design where the border remains in one place, no matter the height of the window?
.story_header {
position: relative;
display: flex;
justify-content: center;
}
.story_header:before,
.story_header:after {
content: '';
width: 100px;
position: absolute;
border: 2px solid black;
margin-top: 20px;
left: 35%;
}
.story_header:after {
right: 35%;
left: auto;
}
<div class='section_1'>
<div class="grid-x">
<div class='large-12 cell'>
<h2 class='story_header'>Our Story</h2>
</div>
</div>

Answer 1

You need to wrap the 'Our Story' to an element let's say span then add the pseudo elements on that span. Try this:
CSS:
.story_header{
position:relative;
display:flex;
justify-content: center;
}
.story_title{
position:relative;
}
.story_title:before, .story_title:after{
content:'';
width:100px;
position:absolute;
border:2px solid black;
margin-top:20px;
}
.story_title:before{
right:100%;
}
.story_title:after{
left:100%;
}
HTML:
<div class="grid-x">
<div class='large-12 cell'>
<h2 class='story_header'> <span class="story_title">Our Story</span></h2>
</div>
</div>