Heading border expand outside of viewport - css

Question

I'm trying to achieve headings with border that expands outside of viewport on one side, just like on the picture below.
I've managed to code the one that is aligned to the left and border expands to the left side using code like this:
.wrapper {
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
padding: 1.5rem;
}
h2 {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0rem;
right: 9598.5rem;
background: transparent;
border:2px solid #000;
}
h2.right {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
text-align: right;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2.right::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 9598.5rem;
right: 0rem;
background: transparent;
border:2px solid #000;
}
<section>
<div class="wrapper">
<h2>s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
<h2 class="right">s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
</div>
</section>
HTML:
CSS:
Problem is with the text that is supposed to be aligned to the right of the wrapper and expand the border to the right. My results so far look like this:
The text still begins on the left edge of the wrapper and is not 660px from the right edge of the wrapper as it is supposed to be. Any idea how to fix this? I've tried playing around with multiple variables but nothing worked.

Answer 1

I have played around a little with it in a fiddle: https://jsfiddle.net/38t1286m/
EDIT: I played with it some more... https://jsfiddle.net/38t1286m/4/ ;)
Basically I have simplified it, so that the HTML looks like this:
<header>
<h2>
This is my LEFT side header
</h2>
</header>
<p>
Here is some text in between...
</p>
<header class="right">
<h2>
This is my RIGHT side header
</h2>
</header>
And with the following css:
p {
width: 660px;
margin-right: auto;
margin-left: auto;
}
h2 {
border: 1px solid black;
max-width: 660px;
margin: 0;
margin-left: auto;
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
header {
position: relative;
max-width: 660px;
padding: 0;
margin: 0;
margin-right: auto;
margin-left: auto;
}
header:before {
content: " ";
width: 660px;
border: 1px solid red;
position: absolute;
left: -660px;
right: -660px;
overflow: hidden;
top: 0;
bottom: 0;
}
header.right {
text-align: right;
}
header.right:before {
left: 660px;
right: 660px;
}
That's at least how I think I would solve it. :)

Answer 2

You could float the second heading to the right, and then clear it using :after
h2.right {
text-align: right;
background: transparent;
z-index: 0;
float: right;
}
h2.right::after {
content: '';
clear: both;
}
codepen