I am trying to create a slanted line that will extend to the whole page. But currently the line have tiny gap on the left and right margin.

Html :

```
    <div class="container-fluid">   
  <div class="row shine">
        <div class="col-lg-7 shine-content text-center">
            <h3>No.1 Bestseller</h3>
            <h1>Rouge Volupte Shine</h1>
            <p>Satin finish. Iconic lipstick. Highly pigmented. A wardrobe of iconic colors that symbolises audacious feminine strength.</p>
    </div>

        <div class="col-lg-5 shine-img d-flex justify-content-center px-5">

        </div>
    </div>

    <hr>

<div class="container-fluid">       
    <div class="row rouge">
        <div class="col-lg-6 rouge-img d-flex justify-content-center px-5">

        <div class="col-lg-6 rouge-content text-center">
            <h1>Rouge Pur Couture</h1>
            <p>In just one stroke, luxurious and highly pigmented colour dresses the lips with a radiant satin finish. Rouge Pur Couture delivers the promise of edgy style and ultimate feminine strength. </p>

        </div>
    </div>
</div>

```

CSS:

```
hr{
    margin:100px 0;
    border: 0;
    border-top: 2px solid #777777;
    position: relative;
    transform: rotate(-5deg)
}   

```

<https://codepen.io/jl-joey/pen/OJXdGJP>