CSS - запретить перемещение рамки при прокрутке

Question

Когда размер окна браузера изменяется, границы смещаются от содержимого?

Как мне добиться дизайна, в котором граница остается в одном месте, независимо от высоты окна?

.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

Вы должны обернуть "Наша история" в элемент, скажем, span затем добавьте псевдоэлементы на этом span, Попробуй это:

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>