How to make a div 500% but still center - html

Question

I have an image like the b
Im trying to achieve an infinite line at the bottom so no matter what screen the line fills the width of the screen.
I have cropped my image and set it to the bottom of a div so i can use a boarder but when i use
.row2{
position: absolute;
width:500%;
overflow: hidden;
}
The div just seems to stretch 510% to the right rather than 250 to the left and 250 to the right and keeping my image the same size (it also moves my image to the center of the div so way off screen)
This is my html :
<div class="row row2">
<div class="col-xl-12 hscentertext" style="">
<img src="assets/img/25k.png" class="img-fluid center-block text-xl-center" alt="Responsive image">
</div>
</div>
I'm using bootstrap. Thanks in advance.

Answer 1

There's no need to use position: absolute; for this:
html, body {
background: red;
margin: 0;
padding: 0;
}
.row2 {
width: 100%;
border-bottom: 1px solid white;
}
.row2 .hscentertext {
text-align: center;
}
<div class="row row2">
<div class="col-xl-12 hscentertext" style="">
<img src="http://placehold.it/200x200" class="img-fluid center-block text-xl-center" alt="Responsive image">
</div>
</div>
Unless you have other reasons to use position: absolute; in which case can center it with transforms:
.selector {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
By using the translateX(-50%); trick the element will always be centered, regardless of it's width.

Answer 2

Since you did not provide the image, i remade one : cutting off edges for the snippet below:
.myimg {
background-color: #D52226;
/* draw the line behind*/
background-image: linear-gradient(to top, transparent 3px, white 3px, white 5px, transparent 5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row2">
<div class="col-xl-12 hscentertext myimg" style="">
<img src="https://i.stack.imgur.com/Bf9Cy.jpg" class="img-fluid center-block text-xl-center" alt="Responsive image">
</div>
</div>
The width of that image used can be reduced to the text it holds.
The line can be drawn on the background of the container .
It can be a gradient or few pixel dot repeated over a background-color.
display:flex can help too to work from a translucide png, which allows background to be modify: example.
.myimg {
display: flex;
background-color: #D52226;
}
.myimg:before,
.myimg:after {
content: '';
flex: 1;
background: linear-gradient(to top, transparent 3px, white 3px, white 5px, transparent 5px);
}
.myimg:hover {
background-color: #4195BE
}
<div class="row row2">
<div class="col-xl-12 hscentertext myimg">
<img src="https://i.stack.imgur.com/37doI.png" class="img-fluid center-block text-xl-center" alt="Responsive image">
</div>
</div>